"use client";

import Button from '@/components/button/PrimaryButton';
import { Button as ShadButton } from '@/components/ui/button';
import ComboBox from '@/components/combobox/Combobox';
import InputField from '@/components/input/InputField';
import { PORFILE_EDIT_PAGE_ELEMENT } from '@/enums';
import { Popover, PopoverTrigger, PopoverContent } from '@radix-ui/react-popover';
// import { useProfile } from '@/hooks/auth/useProfile';
// import { useAuthStore } from '@/zustand/authStore';
import { Calendar2, Camera } from 'iconsax-react';
import Image from 'next/image';
import React, { ChangeEvent, useState } from 'react'
import Calendar from '@/components/ui/calendar';
import { getDateLib } from "react-day-picker/persian";
import { useRouter } from 'next/navigation';

type Props = object

function ProfileIndex({ }: Props) {
    const [fullname, setFullName] = useState("");
    const [email, setEmail] = useState("");
    const [phoneNumber, setPhoneNumber] = useState("");
    const [dateOfBirth, setDateOfBirth] = React.useState<Date | undefined>(new Date());
    const [selectedGender, setSelectedGender] = useState("");
    const [showCalendar, setShowCalendar] = useState(false);
    const dateLib = getDateLib()
    const router = useRouter();

    const changeGender = (e: React.MouseEvent<HTMLDivElement, MouseEvent>, index: number) => {
        setSelectedGender(() => String(index));
    }

    // const isAuthenticated = useAuthStore((state) => state.isAuthenticated);

    // const { mutate, data, isPending } = useProfile();

    // useEffect(() => {
    //     if (isAuthenticated) {
    //         mutate();
    //     }
    //     // eslint-disable-next-line react-hooks/exhaustive-deps
    // }, [isAuthenticated])

    const onChange = (e: ChangeEvent<HTMLInputElement>) => {
        if (e.target.name == PORFILE_EDIT_PAGE_ELEMENT.INPUT_FULLNAME) {
            setFullName(() => e.target.value)
        }
        else if (e.target.name == PORFILE_EDIT_PAGE_ELEMENT.INPUT_EMAIL) {
            setEmail(() => e.target.value)
        }
        else if (e.target.name == PORFILE_EDIT_PAGE_ELEMENT.INPUT_PHONE) {
            setPhoneNumber(() => e.target.value)
        }
        // else if (e.target.name == PORFILE_EDIT_PAGE_ELEMENT.INPUT_DOB) {
        //     setDateOfBirth(() => e.target.value)
        // }
    }

    return (
        <div className='h-full noscrollbar overflow-y-auto flex flex-col'>
            <div className='grid grid-cols-3 items-center'>
                <span></span>
                <h1 className='text-sm2 place-self-center font-medium'>ویرایش اطلاعات</h1>
            </div>

            <div className="mt-8 flex-1 bg-container rounded-container w-full box-shadow-normal py-6 px-4 flex flex-col justify-between">

                <div className="bg-inherit">
                    <div className="justify-self-center w-fit relative text-center pb-10"
                    >
                        <button>
                            <Image
                                src={'/assets/images/user-avatar.png'}
                                className='rounded-full'

                                alt='user avatar'
                                width={96}
                                height={96}
                            />
                            <div
                                className='w-24 h-24 absolute top-0 left-0 rounded-full'
                                style={{
                                    background: 'linear-gradient(180deg, rgba(0, 0, 0, 0) 51.56%, rgba(0, 0, 0, 0.5) 100%)'
                                }}>
                                <Camera size={20} className='stroke-white absolute bottom-3 left-1/2 -translate-x-1/2' />
                            </div>
                        </button>
                    </div>

                    <div className="grid gap-6 mt-6 bg-inherit">
                        <InputField
                            onChange={onChange}
                            className='bg-inherit'
                            labelText='نام و نام خانوادگی'
                            htmlFor={PORFILE_EDIT_PAGE_ELEMENT.INPUT_FULLNAME}
                            value={fullname}
                        />
                        <InputField
                            onChange={onChange}
                            dir='ltr'
                            type='email'
                            className='bg-inherit'
                            labelText='ایمیل'
                            htmlFor={PORFILE_EDIT_PAGE_ELEMENT.INPUT_EMAIL}
                            value={email}
                        />
                        <InputField
                            onChange={onChange}
                            dir='ltr'
                            type='number'
                            className='bg-inherit'
                            labelText='شماره همراه'
                            htmlFor={PORFILE_EDIT_PAGE_ELEMENT.INPUT_PHONE}
                            value={phoneNumber}
                        />
                        <Popover open={showCalendar} onOpenChange={setShowCalendar}>
                            <PopoverTrigger asChild>
                                <ShadButton
                                    variant="outline"
                                    id="date"
                                    className="w-full bg-white justify-between font-normal relative h-11 rounded-normal hover:bg-white"
                                >
                                    {dateOfBirth ? dateLib.format(dateOfBirth, "yyyy/MM/dd") : "انتخاب کنید"}
                                    <Calendar2 className='stroke-disabled2' size={24} />
                                    <span className='absolute text-xs top-0 -translate-y-2 right-2 bg-white px-2'>تاریخ تولد</span>
                                </ShadButton>
                            </PopoverTrigger>
                            <PopoverContent className="w-auto overflow-hidden p-0 z-20 box-shadow-normal rounded-lg" align="center">
                                <Calendar
                                    className='bg-white z-20 min-w-64 rounded-lg'
                                    mode="single"
                                    defaultMonth={dateOfBirth}
                                    selected={dateOfBirth}
                                    captionLayout="dropdown"
                                    onSelect={(date) => {
                                        setDateOfBirth(date)
                                        setShowCalendar(false)
                                    }}
                                />

                            </PopoverContent>
                        </Popover>


                        <div className='relative'>
                            <ComboBox
                                searchable={false}
                                title=""
                                options={[{ id: '0', title: 'آقا', label: 'آقا' }, { id: '1', title: 'خانوم', label: 'خانوم' }]}
                                id={PORFILE_EDIT_PAGE_ELEMENT.INPUT_GENDER}
                                selectedId={selectedGender}
                                onSelectionChange={changeGender} />
                            <span className='absolute text-xs top-0 -translate-y-2 right-2 bg-white px-2'>جنسیت</span>
                        </div>
                    </div>
                </div>

                <div className='w-full text-center mt-16 grid grid-cols-2 gap-4'>
                    <Button>ذخیره</Button>
                    <Button
                        className='bg-neutral-200! text-disabled-text!'
                        onClick={() => router.back()}
                    >
                        انصراف
                    </Button>
                </div>
            </div>
        </div>
    )
}

export default ProfileIndex