import { Label } from "flowbite-react";
import { FC, useEffect, useId, useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { Controller, useFormContext } from "react-hook-form";

type Props = {
  labelText: string;
  name: string;
  labelCls?: string;
  defaultDate?: string | Date | undefined;
};

export const Datepicker: FC<Props> = ({
  labelText,
  name,
  labelCls = "",
  defaultDate = new Date(),
}) => {
  const formatter = new Intl.DateTimeFormat("en-US", {
    day: "2-digit",
    month: "2-digit",
    year: "numeric",
  });
  const { control, setValue } = useFormContext();
  const [date, setDate] = useState(new Date(defaultDate as Date));
  const handleChange = (dateChange: any) => {
    const formattedDate = formatter.format(dateChange);
    setValue(name, formattedDate);
    setDate(dateChange);
  };

  useEffect(() => {
    if (typeof defaultDate === "object") {
      const date = formatter.format(defaultDate);
      setValue(name, date);
    }
  }, [defaultDate]);
  const id = useId();
  return (
    <>
      <div className="w-full">
        <div className={`mb-2 block ${labelCls}`}>
          <Label htmlFor={id} value={labelText} />
        </div>
        <Controller
          name={name}
          defaultValue={date}
          control={control}
          render={() => (
            <DatePicker
              selected={date}
              dateFormat="yyyy/MM/dd"
              onChange={handleChange}
              id={id}
              className="bg-slate-50 border border-slate-300  rounded-md"
            />
          )}
        />
      </div>
    </>
  );
};