import { Link } from "react-router-dom"
import { ComboBox } from "../common/combo-box"
import { Input } from "../common/input"
import { Button } from "@headlessui/react"
import { Controller, SubmitHandler, useForm } from "react-hook-form"
import { RegisterInterface } from "../../types"
import { yupResolver } from "@hookform/resolvers/yup"
import { RegisterSchema } from "../../schema"
import { ErrorComponent } from "../common/error"

export const RegisterForm = () => {
    const { handleSubmit, formState: { errors }, control } = useForm<RegisterInterface>({
        resolver: yupResolver(RegisterSchema)
    })
    const handleRegister: SubmitHandler<RegisterInterface> = async (data) => {
        console.log("data=>", data)
    }
    return (
        <form onSubmit={handleSubmit(handleRegister)}
            className="w-full sm:w-fit sm:min-w-[500px] max-h-screen overflow-y-auto xl:w-1/2 xl:p-0 xl:py-5 p-10 flex flex-col bg-auth-form items-center  gap-y-[42px] rounded-3x rounded-3xl">
            <img src="/svgs/logo/logo.svg" alt="logo" className="auth-logo-size" />
            <div className="flex flex-col w-full md:w-[400px]">
                <div className="flex flex-col gap-y-5">
                    <span className="font-medium text-lg md:text-2xl xl:text-3xl text-primary-text-color">حساب کاربری خود را ایجاد کنید</span>
                    <div className="flex flex-row gap-x-0.5 items-center">
                        <p className="text-secondary-text-color font-normal text-xs md:text-sm">از قبل یک حساب کاربری دارید؟</p>
                        <Link to="/auth/login">
                            <p className="text-primary-color font-bold text-xs md:text-sm cursor-pointer">وارد شوید</p>
                        </Link>
                    </div>
                </div>
                <div className="grid grid-cols-1 gap-y-5 mb-[42px] mt-9">
                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-x-4 gap-y-5">
                        <Controller control={control} name="name" render={({ field }) => <div>
                            <Input type="text" placeholder="نام" field={field} />
                            <ErrorComponent show={errors.name} message={errors.name?.message} />
                        </div>} />
                        <Controller control={control} name="family" render={({ field }) => <div>
                            <Input type="text" placeholder="نام خانوادگی" field={field} />
                            <ErrorComponent show={errors.family} message={errors.family?.message} />
                        </div>} />
                    </div>
                    <div className="flex flex-col lg:flex-row gap-y-5 gap-x-4">
                        <Controller control={control} name="capCity" render={({ field }) => <div>
                            <ComboBox field={field} />
                            <ErrorComponent show={errors.capCity} message={errors.capCity?.message} />
                        </div>} />
                        <Controller control={control} name="city" render={({ field }) => <div>
                            <ComboBox field={field} />
                            <ErrorComponent show={errors.city} message={errors.city?.message} />
                        </div>} />
                    </div>
                    <Controller control={control} name="marketName" render={({ field }) => (<div>
                        <Input type="text" placeholder="نام فروشگاه" field={field} />
                        <ErrorComponent show={errors.marketName} message={errors.marketName?.message} />
                    </div>)} />
                    <Controller control={control} name="phoneNumber" render={({ field }) => <div>
                        <Input type="number" placeholder="شماره موبایل" field={field} />
                        <ErrorComponent show={errors.phoneNumber} message={errors.phoneNumber?.message} />
                    </div>} />
                    <Controller control={control} name="password" render={({ field }) => <div>
                        <Input type="password" placeholder="رمز عبور" field={field} />
                        <ErrorComponent show={errors.password} message={errors.password?.message} />
                    </div>} />
                    <Controller control={control} name="repeatPassword" render={({ field }) => <div>
                        <Input type="password" placeholder="تکرار رمز عبور" field={field} />
                        <ErrorComponent show={errors.repeatPassword} message={errors.repeatPassword?.message} />
                    </div>} />
                </div>
                <Button type="submit">ثبت نام</Button>
            </div>
        </form>
    )
}