"use client";

import { useEffect, useRef, useState } from "react";
import FirstDatePicker from "./date/FirstDatePicker";
import SecondDatePicker from "./date/SecondDatePicker";
import { dateToTimestamp } from "@/helper";

function DatePicker({ setDate }) {
  const nextIconDatePickerF = useRef();
  const prevIconDatePickerF = useRef();
  const nextIconDatePickerS = useRef();
  const prevIconDatePickerS = useRef();

  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState();
  const [loading, setLoading] = useState(true);

  const handleStartDateChange = (date, e) => {
    if (date) {
      setDate(dateToTimestamp(date));
      setEndDate(null);
      setStartDate(date);
    }
  };

  const handleEndDateChange = (date) => {
    if (date) {
      setDate(dateToTimestamp(date));
      setEndDate(date);
      setStartDate(null);
    }
  };

  const handleDisableDate = (e) => {
    const today = new Date();
    return today >= e._d;
  };

  useEffect(() => {
    if (nextIconDatePickerS.current) {
      nextIconDatePickerS.current.click();

      setLoading(false);
    }
  }, [nextIconDatePickerS]);

  return (
    <div className="datePickerApt flex items-start custom-datepicker justify-evenly w-full">
      <FirstDatePicker
        loading={loading}
        startDate={startDate}
        handleDisableDate={handleDisableDate}
        nextIconDatePickerF={nextIconDatePickerF}
        prevIconDatePickerF={prevIconDatePickerF}
        prevIconDatePickerS={prevIconDatePickerS}
        handleStartDateChange={handleStartDateChange}
      />
      <SecondDatePicker
        loading={loading}
        endDate={endDate}
        handleDisableDate={handleDisableDate}
        nextIconDatePickerF={nextIconDatePickerF}
        nextIconDatePickerS={nextIconDatePickerS}
        prevIconDatePickerS={prevIconDatePickerS}
        handleEndDateChange={handleEndDateChange}
      />
    </div>
  );
}

export default DatePicker;