"use client";
import { zodResolver } from "@hookform/resolvers/zod";
import { Button } from "@heroui/button";
import { Input } from "@heroui/input";
import { Select, SelectItem, SelectSection } from "@heroui/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);
  };

  const handleValueChange = (newValue: any, num: any) => {
    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;
