import { CardAdd } from "iconsax-react"
import { DialogComponent } from "../common/dialog"
import { FC } from "react"
import { Input } from "../common/input"
import { Button } from "@headlessui/react"
import { bankCarts, findBankByPAN } from "../../utility/cart"
import { Controller, SubmitHandler, useForm } from "react-hook-form"
import { AddNewCartInterface } from "../../types"
import { yupResolver } from "@hookform/resolvers/yup"
import { AddNewCardSchema } from "../../schema"
import { ErrorComponent } from "../common/error"

type Props = {
    isOpen: boolean,
    close: () => void
}
export const AddNewCardDialog: FC<Props> = ({ isOpen, close }) => {
    const { handleSubmit, formState: { errors }, control } = useForm<AddNewCartInterface>({
        resolver: yupResolver(AddNewCardSchema)
    })
    const createNewCard: SubmitHandler<AddNewCartInterface> = async (data) => {
        const finalData: any = {
            id: bankCarts?.length + 1,
            bankName: findBankByPAN(data.cartNumber).name,
            bankPersianName: findBankByPAN(data.cartNumber).name_farsi,
            cartNumber: data?.cartNumber.toString(),
            cartOwner: `${data.name} ${data?.family}`,
            shabaNumber: data?.shabaNumber,
        }
        bankCarts.push(finalData)
        close()
    }
    return (
        <DialogComponent isOpen={isOpen} close={close} title="ایجاد حساب بانکی جدید" subTitle="لطفا اطلاعات را با دقت وارد نمایید" icon={<CardAdd color="#11212D" className="size-[50px]" />}>
            <form onSubmit={handleSubmit(createNewCard)} className="flex flex-col gap-[42px] mt-9">
                <div className="w-full flex flex-col gap-6">
                    <Controller control={control} name="name" render={({ field }) => (
                        <div>
                            <Input placeholder="نام صاحب کارت" field={field} className="bg-auth-form" />
                            <ErrorComponent show={errors.name} message={errors.name?.message} />
                        </div>
                    )} />
                    <Controller control={control} name="family" render={({ field }) => (
                        <div>
                            <Input field={field} placeholder="نام خانوادگی صاحب کارت" className="bg-auth-form" />
                            <ErrorComponent show={errors.family} message={errors.family?.message} />
                        </div>
                    )} />
                    <Controller control={control} name="cartNumber" render={({ field }) => (
                        <div>
                            <Input field={field} placeholder="شماره کارت" className="bg-auth-form" />
                            <ErrorComponent show={errors.cartNumber} message={errors.cartNumber?.message} />
                        </div>
                    )} />
                    <Controller control={control} name="shabaNumber" render={({ field }) => (
                        <div>
                            <Input field={field} placeholder="شماره شبا" className="bg-auth-form" />
                            <ErrorComponent show={errors.shabaNumber} message={errors.shabaNumber?.message} />
                        </div>
                    )} />
                </div>
                <div className="flex flex-col gap-[6px]">
                    <Button type="submit" className="w-full bg-primary-color text-white">ایجاد حساب</Button>
                    <Button onClick={close} className="w-full bg-transparent text-primary-color">لغو</Button>
                </div>
            </form>
        </DialogComponent>
    )
}