'use client'
import { zodResolver } from "@hookform/resolvers/zod";
import { Button } from '@nextui-org/button';
import { Input, Textarea } 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 { Calender, CustomerService, EyeFilledIcon, EyeSlashFilledIcon, Hotline, Location, Mail } 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 Contact: 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 pb-5 md:pb-20">
            <p className="text-center text-md md:text-2xl text-[#DD8306] font-bold my-2 md:my-5 lg:my-10">Kontak Kami</p>
            <div className="lg:flex px-1 lg:px-10">
                <div className="w-auto lg:w-1/3 bg-[#1F1A17] text-center text-white px-1 lg:px-5 py-5 rounded-lg text-sm space-y-3">
                    <div className="text-lg font-semibold">Informasi Kontak</div>
                    <div className="font-extralight">Berikut informasi lengkap terkait Divisi Humas Polri</div>
                    <div className="text-left pl-0 lg:pl-10 space-y-4">
                        <div className="flex items-center gap-3">
                            <div><Hotline /></div>
                            <div>Hotline Divisi HumasPolri (021) 72120599</div>
                        </div>
                        <div className="flex items-center  gap-3">
                            <div><Hotline /></div>
                            <div>Hotline Divisi HumasPolri (021) 72120599</div>
                        </div>
                        <div className="flex items-center  gap-3">
                            <div><CustomerService /></div>
                            <div>Call Center 110</div>
                        </div>
                        <div className="flex items-center  gap-3">
                            <div><Mail /></div>
                            <div>ppid@polri.go.id</div>
                        </div>
                        <div className="flex items-center text-lefts gap-3">
                            <div><Location /></div>
                            <div>Jl Trunojoyo No.3, RT.2/RW.1, Selong, Kec. Kebayoran Baru, Kota Jakarta Selatan, Daerah Khusus Ibukota Jakarta 12110, Indonesia</div>
                        </div>
                        <div className="flex items-center  gap-3">
                            <div><Calender /></div>
                            <div>Hari Senin - Jumat | 08:00 - 15:00 WIB</div>
                        </div>
                    </div>
                    <div className="border-2 border-red-600 flex justify-center">
                        <img src="maps.png" alt="maps" className="" />
                    </div>
                </div>
                <div className="w-auto lg:w-2/3 relative p-2 md:p-5 space-y-3 pr-2 md:pr-28">
                    <div className="text-sm md:text-xl font-bold">Silahkan tuliskan pertanyaan anda kepada kami</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"
                            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
                            type="text"
                            label="Email"
                            placeholder="Masukkan email 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="Judul"
                            placeholder="Masukkan judul pertanyaan 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="Pesan"
                            placeholder="Pesan anda..."
                            variant='underlined'
                        />
                    </div>
                    <div className="hidden lg:block absolute -top-28 right-28">
                        <img src="sparklg.png" alt="" className="" />
                    </div>
                    <div className="flex justify-center md:justify-end">
                        <Button className="bg-[#DD8306] w-auto md:w-[200px] rounded-lg" size="md">Kirim Pesan</Button>
                        <img src="ar.png" alt="ar" className="absolute right-[28%] -bottom-3 hidden lg:block" />
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Contact;
