import { ComboBox } from "../common/combo-box"
import { FC, useEffect, useState } from "react"
import { useUserStore } from "../../store/user"
import { ButtonComponent } from "../common/button"
import { Controller, SubmitHandler, useForm } from "react-hook-form"
import { CardBank, SendWithdraw } from "../../types"
import { ErrorComponent } from "../common/error"
import { useMutation } from "@tanstack/react-query"
import { sendwithdraw } from "../../services/api/wallet"
import toast from "react-hot-toast"
import { handleError } from "../../utility/error-handle"
import { Input } from "../common/input"

type Props = {
    pending: boolean
}

export const WalletAddress: FC<Props> = ({ pending }) => {
    const [selectedCard, setSelectedCard] = useState<CardBank | null>(null)
    const { mutate, isPending } = useMutation({
        mutationFn: sendwithdraw,
        mutationKey: ["withdraw"]
    })
    const { handleSubmit, formState: { errors }, control, watch } = useForm<any>({
    })
    const cardDetail: any = watch("card")
    const [userBanks, setUserBanks] = useState<any>([])
    const { user } = useUserStore()
    useEffect(() => {
        const tempUserBanks: any = [...userBanks]
        user?.cardBank?.map((cards: any) => tempUserBanks.push({
            id: cards?.IBAN,
            name: cards?.PAN,
        }))
        setUserBanks(tempUserBanks)

    }, [user])
    useEffect(() => {
        const selectedCard: CardBank | CardBank[] | [] = user?.cardBank?.filter((cardBanks: any) => cardBanks?.IBAN === cardDetail?.id && cardBanks?.PAN === cardDetail?.name)
        setSelectedCard(selectedCard?.[0])
    }, [cardDetail])
    const handleSendWithdraw: SubmitHandler<SendWithdraw> = async () => {
        await mutate({
            card: {
                holderName: selectedCard?.holderName,
                PAN: selectedCard?.PAN,
                IBAN: selectedCard?.IBAN
            }
        }, {
            onSuccess: (res: any) => {
                toast.success("درخواست شما با موفقیت ثبت شد")
            },
            onError: (err: any) => handleError(err)
        })
    }
    return (
        <form onSubmit={handleSubmit(handleSendWithdraw)} className="w-full flex flex-col lg:flex-row bg-auth-form p-[30px] rounded-[40px] gap-8">
            <div className="w-full h-full flex items-center justify-center">
                <img src="/svgs/dashboard/wallet.svg" alt="wallet" className="size-full max-w-[500px] max-h-[500px]" />
            </div>
            <div className="flex flex-col w-full gap-10 justify-center lg:justify-between">
                <div className="flex flex-col gap-10">
                    <p className="text-2xl font-medium text-primary-text-color">ثبت درخواست برداشت از حساب</p>

                    {!pending && <Controller control={control} name="card" render={({ field }) => (
                        <>
                            <ComboBox placeholder="حساب بانکی مورد نظر خود را انتخاب کنید" data={userBanks} field={field} />
                            <ErrorComponent show={errors?.card} message={errors?.card?.message} />
                            {/* <Input placeholder="مبلغ را وارد کنید" /> */}
                        </>
                    )} />}
                </div>
                {!pending && <p className="font-normal text-base text-primary-text-color text-justify lg:text-wrap">
                    برای درخواست برداشت از حساب، حساب بانکی مورد نظر خود را انتخاب کنید. پس از انتخاب حساب بانکی، مبلغ مورد نظر خود را وارد کرده و درخواست خود را ثبت کنید.
                </p>}
                {pending && <p className="text-lg font-normal text-justify lg:text-wrap">
                    {`همکار گرامی
                    طبق درخواست قبلی، عملیات واریز  به حساب شما در حال اجراست. متاسفانه پیش از تکمیل درخواست، امکان شروع عملیات جدید برای شما وجود ندارد.`}</p>}
                <div className="w-full flex justify-end">
                    <ButtonComponent className="w-full min-w-full xl:min-w-min xl:max-w-60" pending={isPending} title={pending ? "لغو درخواست" : "ثبت درخواست"} type="submit" />
                </div>
            </div>
        </form >
    )
}