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 { 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;
  onChange?: (x: any) => void;
};

export const DateRangePicker: FC<Props> = ({
  labelText,
  name,
  labelCls = "",
  defaultDate = new Date(),
  dateFormat = "yyyy-MM-dd",
  isClearable = false,
  placeholder = undefined,
  onChange = () => {},
}) => {
  const formatter = new Intl.DateTimeFormat("fr-CA", {
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
  });
  const { setValue } = useFormContext();
  const [dateRange, setDateRange] = useState([null, null]);
  const [startDate, endDate] = dateRange;

  //if user not change date and keep default date
  useEffect(() => {
    let start_date = null;
    let end_date = null;
    if (startDate) {
      start_date = formatter?.format(startDate);
      setValue(name, start_date);
    }
    if (endDate) {
      end_date = formatter?.format(endDate);
      const date = `${start_date},${end_date}`;
      setValue(name, date);
    }
    if (!startDate) {
      setValue(name, "");
    }
    onChange(dateRange);
  }, [dateRange]);

  const id = useId();
  return (
    <>
      <div className="w-full">
        <div className={`mb-2 block ${labelCls}`}>
          <Label htmlFor={id} value={labelText} />
        </div>
        <DatePicker
          selectsRange={true}
          startDate={startDate}
          endDate={endDate}
          onChange={(update: any) => {
            setDateRange(update);
          }}
          dateFormat={dateFormat}
          isClearable={isClearable}
          placeholderText={placeholder}
          className="bg-slate-50 border border-slate-300  rounded-md w-full date-range text-xs h-11 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-900 "
        />
      </div>
    </>
  );
};