import { Button } from "@headlessui/react"
import { Input } from "../common/input"
import { DatepickerComponent } from "../common/datepicker"
import { Controller, SubmitHandler, useForm } from "react-hook-form"
import { MyAccountInterface } from "../../types"
import { yupResolver } from "@hookform/resolvers/yup"
import { MyAccountSchema } from "../../schema"
import { ErrorComponent } from "../common/error"
import { ComboBox } from "../common/combo-box"

export const MyAccountPage = () => {
    const { handleSubmit, formState: { errors }, control } = useForm<MyAccountInterface>({
        resolver: yupResolver(MyAccountSchema)
    })

    const handleMyAccountForm: SubmitHandler<MyAccountInterface> = async (data) => {
        console.log("data =>", data)
    }

    return (
        <form onSubmit={handleSubmit(handleMyAccountForm)} className="w-full h-full flex flex-col gap-10 bg-auth-form rounded-[40px] p-[30px]">
            <div className="flex flex-col gap-5 xl:gap-0 xl:flex-row xl:gap-x-10 xl:justify-between items-start">
                <div className="flex flex-col gap-y-5 w-full xl:max-w-fit">
                    <p className="font-medium text-xl text-primary-text-color">اطلاعات اولیه</p>
                    <p className="font-normal text-base text-secondary-text-color text-wrap xl:max-w-xs">
                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون
                    </p>
                </div>
                <div className="flex flex-col gap-10 w-full">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-[18px]">
                        <Controller name="phoneNumber" control={control} render={({ field }) => (
                            <div>
                                <Input placeholder="شماره تماس" type="number" field={field} />
                                <ErrorComponent show={errors.phoneNumber} message={errors.phoneNumber?.message} />
                            </div>
                        )} />
                        <Controller name="marketName" control={control} render={({ field }) => (
                            <div>
                                <Input placeholder="نام شرکت" field={field} />
                                <ErrorComponent show={errors.marketName} message={errors.marketName?.message} />
                            </div>
                        )} />
                        <Controller name="name" control={control} render={({ field }) => (
                            <div>
                                <Input placeholder="نام" field={field} />
                                <ErrorComponent show={errors.name} message={errors.name?.message} />
                            </div>
                        )} />
                        <Controller name="family" control={control} render={({ field }) => (
                            <div>
                                <Input placeholder="نام خانوادگی" field={field} />
                                <ErrorComponent show={errors.family} message={errors.family?.message} />
                            </div>
                        )} />
                        <Controller name="capCity" control={control} render={({ field }) => (
                            <div>
                                <ComboBox field={field} />
                                <ErrorComponent show={errors.capCity} message={errors.capCity?.message} />
                            </div>
                        )} />
                        <Controller name="city" control={control} render={({ field }) => (
                            <div>
                                <ComboBox field={field} />
                                <ErrorComponent show={errors.city} message={errors.city?.message} />
                            </div>
                        )} />
                    </div>
                    <div className="divide-y-2 border" />
                </div>
            </div>
            <div className="flex flex-col gap-5 xl:gap-0 xl:flex-row xl:gap-x-10 xl:justify-between items-start">
                <div className="flex flex-col gap-y-5 w-full xl:max-w-fit">
                    <p className="font-medium text-xl text-primary-text-color">اطلاعات تکمیلی</p>
                    <p className="font-normal text-base text-secondary-text-color text-wrap xl:max-w-xs">
                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون
                    </p>
                </div>
                <div className="flex flex-col gap-10 w-full">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-[18px]">
                        <Controller name="address" control={control} render={({ field }) => (
                            <div>
                                <Input placeholder="آدرس" field={field} />
                                <ErrorComponent show={errors.address} message={errors.address?.message} />
                            </div>
                        )} />
                        <Controller name="phoneNumber1" control={control} render={({ field }) => (
                            <div>
                                <Input placeholder="شماره تماس" type="number" field={field} />
                                <ErrorComponent show={errors.phoneNumber1} message={errors.phoneNumber1?.message} />
                            </div>
                        )} />
                        <Controller name="staticNumber" control={control} render={({ field }) => (
                            <div>
                                <Input placeholder="شماره ثابت" type="number" field={field} />
                                <ErrorComponent show={errors.staticNumber} message={errors.staticNumber?.message} />
                            </div>
                        )} />
                        <Controller name="date" control={control} render={({ field }) => (
                            <div className="flex flex-col gap-y-9">
                                <DatepickerComponent field={field} />
                                <ErrorComponent show={errors.date} message={errors.date?.message} />
                            </div>
                        )} />
                    </div>
                    <div className="divide-y-2 border" />
                </div>
            </div>
            <div className="flex flex-col gap-5 xl:gap-0 xl:flex-row xl:gap-x-10 xl:justify-between items-start">
                <div className="flex flex-col gap-y-5 w-full xl:max-w-fit">
                    <p className="font-medium text-xl text-primary-text-color">تغییر رمز عبور</p>
                    <p className="font-normal text-base text-secondary-text-color text-wrap xl:max-w-xs">
                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون
                    </p>
                </div>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-[18px] w-full">
                    <Controller name="currentPassword" control={control} render={({ field }) => (
                        <div>
                            <Input placeholder="رمز عبور فعلی" type="password" field={field} />
                            <ErrorComponent show={errors.currentPassword} message={errors.currentPassword?.message} />
                        </div>
                    )} />
                    <div />
                    <Controller name="newPassword" control={control} render={({ field }) => (
                        <div>
                            <Input placeholder="رمز عبور جدید" type="password" field={field} />
                            <ErrorComponent show={errors.newPassword} message={errors.newPassword?.message} />
                        </div>
                    )} />
                    <Controller name="repeatPassword" control={control} render={({ field }) => (
                        <div>
                            <Input placeholder="تکرار رمز عبور" type="password" field={field} />
                            <ErrorComponent show={errors.repeatPassword} message={errors.repeatPassword?.message} />
                        </div>
                    )} />
                </div>
            </div>
            <div className="flex w-full xl:justify-end mt-10">
                <Button type="submit" className="w-full xl:max-w-fit xl:min-w-72">ذخیره</Button>
            </div>
        </form>
    )
}