'use client'
import { zodResolver } from "@hookform/resolvers/zod";
import { Button } from '@nextui-org/button';
import { Input } from '@nextui-org/input';
import { Select, SelectItem, SelectSection } from '@nextui-org/react';
import React, { useState } from 'react';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { EyeFilledIcon, EyeSlashFilledIcon } from '../icons';
import Datepicker from "react-tailwindcss-datepicker";

const schema = z.object({
    name: z.string().min(3).max(50),
    email: z.string().email(),
});
interface FormData {
    name: string;
    email: string;
}

const FormApplication: React.FC = () => {
    const [isVisible, setIsVisible] = React.useState(false);
    const [selectedGender, setSelectedGender] = React.useState('');

    const [startDateValue, setStartDateValue] = useState({
        startDate: null,
        endDate: null,
    });

    const toggleVisibility = () => setIsVisible(!isVisible);

    const { register, handleSubmit, formState: { errors } } = useForm<FormData>({
        resolver: zodResolver(schema),
    });

    const onChangeGender = (selectedItem: any) => {
        setSelectedGender(selectedItem);
        // Lakukan apa pun yang perlu dilakukan saat pilihan jenis kelamin berubah di sini
        console.log("Selected Gender:", selectedItem);
    };

    const handleValueChange = (newValue: any, num: any) => {
        console.log("start:", newValue);
        setStartDateValue(newValue);
    }


    const onSubmit = (data: FormData) => {
        console.log(data);
    };

    return (
        // <form onSubmit={handleSubmit(onSubmit)}>
        //     <div>
        //         <label htmlFor="name">Name:</label>
        //         <input {...register('name')} id="name" />
        //         {errors.name && <p>{errors.name.message}</p>}
        //     </div>
        //     <div>
        //         <label htmlFor="email">Email:</label>
        //         <input {...register('email')} id="email" />
        //         {errors.email && <p>{errors.email.message}</p>}
        //     </div>
        //     <button type="submit">Submit</button>
        // </form>
        <div className=' bg-white text-black py-2 md:py-5 lg:py-10 px-2 md:px-5 lg:px-16 space-y-2 md:space-y-5'>
            <div className='text-xl font-bold'>Form Register Permohonan</div>
            <div>
                <Input
                    classNames={{
                        input: ["w-full", "bg-transparent", "!text-black"],
                        mainWrapper: ["w-full", "bg-transparent"],
                        innerWrapper: ["bg-transparent"],
                        label: ["!text-black", "font-semibold"],
                        inputWrapper: [
                            "bg-transparent",
                            "dark:bg-transparent",
                            "hover:bg-transparent",
                            "dark:hover:bg-transparent",
                            "group-data-[focused=true]:bg-transparent",
                            "dark:group-data-[focused=true]:bg-transaparent",
                            "group-data-[focused=false]:bg-transparent",
                            "focus-within:!bg-transparent",
                        ],
                    }}
                    isRequired
                    type="text"
                    label="Username"
                    placeholder="Masukkan username anda!"
                    variant='underlined'
                />
            </div>
            <div>
                <Input
                    classNames={{
                        input: ["w-full", "bg-transparent", "!text-black"],
                        mainWrapper: ["w-full", "bg-transparent"],
                        innerWrapper: ["bg-transparent"],
                        label: ["!text-black", "font-semibold"],
                        inputWrapper: [
                            "bg-transparent",
                            "dark:bg-transparent",
                            "hover:bg-transparent",
                            "dark:hover:bg-transparent",
                            "group-data-[focused=true]:bg-transparent",
                            "dark:group-data-[focused=true]:bg-transaparent",
                            "group-data-[focused=false]:bg-transparent",
                            "focus-within:!bg-transparent",
                        ],
                    }}
                    isRequired
                    endContent={
                        <button className="focus:outline-none" type="button" onClick={toggleVisibility}>
                            {isVisible ? (
                                <EyeSlashFilledIcon className="text-2xl text-default-400 pointer-events-none" />
                            ) : (
                                <EyeFilledIcon className="text-2xl text-default-400 pointer-events-none" />
                            )}
                        </button>
                    }
                    type={isVisible ? "text" : "password"}
                    label="Password"
                    placeholder="Masukkan password anda"
                    variant='underlined'
                />
            </div>
            <div>
                <Input
                    classNames={{
                        input: ["w-full", "bg-transparent", "!text-black"],
                        mainWrapper: ["w-full", "bg-transparent"],
                        innerWrapper: ["bg-transparent"],
                        label: ["!text-black", "font-semibold"],
                        inputWrapper: [
                            "bg-transparent",
                            "dark:bg-transparent",
                            "hover:bg-transparent",
                            "dark:hover:bg-transparent",
                            "group-data-[focused=true]:bg-transparent",
                            "dark:group-data-[focused=true]:bg-transaparent",
                            "group-data-[focused=false]:bg-transparent",
                            "focus-within:!bg-transparent",
                        ],
                    }}
                    isRequired
                    endContent={
                        <button className="focus:outline-none" type="button" onClick={toggleVisibility}>
                            {isVisible ? (
                                <EyeSlashFilledIcon className="text-2xl text-default-400 pointer-events-none" />
                            ) : (
                                <EyeFilledIcon className="text-2xl text-default-400 pointer-events-none" />
                            )}
                        </button>
                    }
                    type={isVisible ? "text" : "password"}
                    label="Konfirmasi Password"
                    placeholder="Masukkan password anda"
                    variant='underlined'
                />
            </div>
            <div>
                <Input
                    classNames={{
                        input: ["w-full", "bg-transparent", "!text-black"],
                        mainWrapper: ["w-full", "bg-transparent"],
                        innerWrapper: ["bg-transparent"],
                        label: ["!text-black", "font-semibold"],
                        inputWrapper: [
                            "bg-transparent",
                            "dark:bg-transparent",
                            "hover:bg-transparent",
                            "dark:hover:bg-transparent",
                            "group-data-[focused=true]:bg-transparent",
                            "dark:group-data-[focused=true]:bg-transaparent",
                            "group-data-[focused=false]:bg-transparent",
                            "focus-within:!bg-transparent",
                        ],
                    }}
                    isRequired
                    type="text"
                    label="Nama Lengkap"
                    placeholder="Masukkan nama lengkap anda"
                    variant='underlined'
                />
            </div>
            <div>
                <Input
                    classNames={{
                        input: ["w-full", "bg-transparent", "!text-black"],
                        mainWrapper: ["w-full", "bg-transparent"],
                        innerWrapper: ["bg-transparent"],
                        label: ["!text-black", "font-semibold"],
                        inputWrapper: [
                            "bg-transparent",
                            "dark:bg-transparent",
                            "hover:bg-transparent",
                            "dark:hover:bg-transparent",
                            "group-data-[focused=true]:bg-transparent",
                            "dark:group-data-[focused=true]:bg-transaparent",
                            "group-data-[focused=false]:bg-transparent",
                            "focus-within:!bg-transparent",
                        ],
                    }}
                    isRequired
                    type="text"
                    label="Pekerjaan"
                    placeholder="Masukkan informasi pekerjaan Anda!"
                    variant='underlined'
                />
            </div>
            <div>
                <Select
                    label="Jenis Kelamin"
                    placeholder="Pilih Jenis Kelamin"
                    className="max-w-sm"
                    isRequired
                    variant="underlined"
                    classNames={{
                        label: ["!text-black", "font-semibold"],
                        // mainWrapper: "rounded",
                        listboxWrapper:
                            "bg-white w-full !text-indigo-500 text-center font-bold",
                        popoverContent: "bg-white !text-indigo-500",
                        trigger:
                            "hover:!bg-gray-100",
                        value: "!text-black"
                    }}
                    listboxProps={{
                        itemClasses: {
                            base: [
                                "!text-left",
                                "!text-black",
                                "!bg-white",
                                "text-indigo-500 ",
                                "data-[selectable=true]:!text-indigo-500",
                                "data-[pressed=true]:text-indigo-500",
                                "data-[hover=true]:!text-indigo-300",
                            ],
                            wrapper: ["!bg-white border-none"],

                        },
                    }}
                    onChange={onChangeGender}
                >
                    <SelectSection >
                        <SelectItem key="male">Laki-laki</SelectItem>
                        <SelectItem key="female">Perempuan</SelectItem>
                    </SelectSection>
                </Select>
            </div>
            <div>
                <Select
                    label="Tipe"
                    placeholder="Pilih tipe permohonan informasi sesuai kebutuhn anda"
                    className="max-w-sm"
                    isRequired
                    variant="underlined"
                    classNames={{
                        label: ["!text-black", "font-semibold"],
                        // mainWrapper: "rounded",
                        listboxWrapper:
                            "bg-white w-full !text-indigo-500 text-center font-bold",
                        popoverContent: "bg-white !text-indigo-500",
                        trigger:
                            "hover:!bg-gray-100",
                        value: "!text-black"
                    }}
                    listboxProps={{
                        itemClasses: {
                            base: [
                                "!text-left",
                                "!text-black",
                                "!bg-white",
                                "text-indigo-500 ",
                                "data-[selectable=true]:!text-indigo-500",
                                "data-[pressed=true]:text-indigo-500",
                                "data-[hover=true]:!text-indigo-300",
                            ],
                            wrapper: ["!bg-white border-none"],

                        },
                    }}
                    onChange={onChangeGender}
                >
                    <SelectSection >
                        <SelectItem key="male">Laki-laki</SelectItem>
                        <SelectItem key="female">Perempuan</SelectItem>
                    </SelectSection>
                </Select>
            </div>
            <div>
                <Input
                    classNames={{
                        input: ["w-full", "bg-transparent", "!text-black"],
                        mainWrapper: ["w-full", "bg-transparent"],
                        innerWrapper: ["bg-transparent"],
                        label: ["!text-black", "font-semibold"],
                        inputWrapper: [
                            "bg-transparent",
                            "dark:bg-transparent",
                            "hover:bg-transparent",
                            "dark:hover:bg-transparent",
                            "group-data-[focused=true]:bg-transparent",
                            "dark:group-data-[focused=true]:bg-transaparent",
                            "group-data-[focused=false]:bg-transparent",
                            "focus-within:!bg-transparent",
                        ],
                    }}
                    isRequired
                    type="text"
                    label="KTP"
                    placeholder="Masukkan nomor ktp anda!"
                    variant='underlined'
                />
            </div>
            <div>
                <Input
                    classNames={{
                        input: ["w-full", "bg-transparent", "!text-black"],
                        mainWrapper: ["w-full", "bg-transparent"],
                        innerWrapper: ["bg-transparent"],
                        label: ["!text-black", "font-semibold"],
                        inputWrapper: [
                            "bg-transparent",
                            "dark:bg-transparent",
                            "hover:bg-transparent",
                            "dark:hover:bg-transparent",
                            "group-data-[focused=true]:bg-transparent",
                            "dark:group-data-[focused=true]:bg-transaparent",
                            "group-data-[focused=false]:bg-transparent",
                            "focus-within:!bg-transparent",
                        ],
                    }}
                    isRequired
                    type="text"
                    label="Alamat"
                    placeholder="Masukkan alamat anda!"
                    variant='underlined'
                />
            </div>
            <div>
                <Input
                    classNames={{
                        input: ["w-full", "bg-transparent", "!text-black"],
                        mainWrapper: ["w-full", "bg-transparent"],
                        innerWrapper: ["bg-transparent"],
                        label: ["!text-black", "font-semibold"],
                        inputWrapper: [
                            "bg-transparent",
                            "dark:bg-transparent",
                            "hover:bg-transparent",
                            "dark:hover:bg-transparent",
                            "group-data-[focused=true]:bg-transparent",
                            "dark:group-data-[focused=true]:bg-transaparent",
                            "group-data-[focused=false]:bg-transparent",
                            "focus-within:!bg-transparent",
                        ],
                    }}
                    isRequired
                    type="text"
                    label="No Telp"
                    placeholder="Masukkan nomor telepon anda!"
                    variant='underlined'
                />
            </div>
            <div>
                <Input
                    classNames={{
                        input: ["w-full", "bg-transparent", "!text-black"],
                        mainWrapper: ["w-full", "bg-transparent"],
                        innerWrapper: ["bg-transparent"],
                        label: ["!text-black", "font-semibold"],
                        inputWrapper: [
                            "bg-transparent",
                            "dark:bg-transparent",
                            "hover:bg-transparent",
                            "dark:hover:bg-transparent",
                            "group-data-[focused=true]:bg-transparent",
                            "dark:group-data-[focused=true]:bg-transaparent",
                            "group-data-[focused=false]:bg-transparent",
                            "focus-within:!bg-transparent",
                        ],
                    }}
                    isRequired
                    type="text"
                    label="Email"
                    placeholder="Masukkan email anda!"
                    variant='underlined'
                />
            </div>
            <div>
                <Input
                    className="max-w-sm"
                    classNames={{
                        input: ["w-full", "bg-transparent", "!text-black"],
                        mainWrapper: ["w-full", "bg-transparent"],
                        innerWrapper: ["bg-transparent"],
                        label: ["!text-black", "font-semibold", "text-xs", "w-full"],
                        inputWrapper: [
                            "bg-transparent",
                            "dark:bg-transparent",
                            "hover:bg-transparent",
                            "dark:hover:bg-transparent",
                            "group-data-[focused=true]:bg-transparent",
                            "dark:group-data-[focused=true]:bg-transaparent",
                            "group-data-[focused=false]:bg-transparent",
                            "focus-within:!bg-transparent",
                        ],
                    }}
                    isRequired
                    type="text"
                    label="Tanggal Lahir"
                    isReadOnly
                    labelPlacement="outside-left"
                />
                <Datepicker
                    useRange={false}
                    asSingle={true}
                    value={startDateValue}
                    displayFormat="DD/MM/YYYY"
                    onChange={(e: any) => handleValueChange(e, 1)}
                    inputClassName="w-full bg-transparent border-1 border-gray-200 px-2 py-[6px] rounded-xl "
                />
            </div>
            <div>
                <Select
                    label="Pendidikan Terakhir"
                    placeholder="Pilih Pendidikan terakhir anda"
                    className="max-w-sm"
                    isRequired
                    variant="underlined"
                    classNames={{
                        label: ["!text-black", "font-semibold"],
                        // mainWrapper: "rounded",
                        listboxWrapper:
                            "bg-white w-full !text-indigo-500 text-center font-bold",
                        popoverContent: "bg-white !text-indigo-500",
                        trigger:
                            "hover:!bg-gray-100",
                        value: "!text-black"
                    }}
                    listboxProps={{
                        itemClasses: {
                            base: [
                                "!text-left",
                                "!text-black",
                                "!bg-white",
                                "text-indigo-500 ",
                                "data-[selectable=true]:!text-indigo-500",
                                "data-[pressed=true]:text-indigo-500",
                                "data-[hover=true]:!text-indigo-300",
                            ],
                            wrapper: ["!bg-white border-none"],

                        },
                    }}
                // onChange={onChangeGender}
                >
                    <SelectSection >
                        <SelectItem key="sd">SD</SelectItem>
                        <SelectItem key="smp">SMP</SelectItem>
                        <SelectItem key="sma">SMA</SelectItem>
                        <SelectItem key="d">D1/D2/D3</SelectItem>
                        <SelectItem key="s1">S1</SelectItem>
                        <SelectItem key="s2">S2</SelectItem>
                        <SelectItem key="femals3">S3</SelectItem>
                    </SelectSection>
                </Select>
            </div>
            <Button className="w-full bg-[#DD8306] font-semibold">Daftar Sekarang</Button>
        </div>
    );
};

export default FormApplication;
