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 | null;
  dateFormat?: string;
  isClearable?: boolean;
  placeholder?: string | undefined;
};

export const Datepicker: FC<Props> = ({
  labelText,
  name,
  labelCls = "",
  defaultDate = new Date(),
  dateFormat = "yyyy-MM-dd",
  isClearable = false,
  placeholder = undefined,
}) => {
  const formatter = new Intl.DateTimeFormat("en-US", {
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
  });
  const { control, setValue } = useFormContext();
  const [date, setDate] = useState<any>(new Date(defaultDate as Date));

  const handleChange = (dateChange: any) => {
    if (dateChange && name) {
      let formattedDate: string | null = formatter?.format(dateChange);
      setValue(name, formattedDate);
      setDate(dateChange);
    } else {
      setDate(dateChange);
      setValue(name, "");
    }
  };

  //if user not change date and keep default date
  useEffect(() => {
    if (typeof defaultDate === "object" && date) {
      const format_date = formatter?.format(date);
      setValue(name, format_date);
    }
    if (!defaultDate) {
      setDate(null);
    }
  }, [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={dateFormat}
              onChange={handleChange}
              id={id}
              isClearable={isClearable}
              placeholderText={placeholder}
              className="bg-slate-50 border border-slate-300  rounded-md w-full dark:bg-gray-700 dark:text-gray-200 dark:border-gray-900"
            />
          )}
        />
      </div>
    </>
  );
};