"use client";

import { useEffect, useRef, useState } from "react";
import { DatePicker as DatePickerJalali } from "jalaali-react-date-picker";
import { Skeleton } from "@mui/material";
import NextIconDatePicker from "./NextIconDatePicker";
import PrevIconDatePicker from "./PrevIconDatePicker";

function DatePicker({ date, updateDate }) {
  const nextIconDatePicker = useRef();
  const prevIconDatePicker = useRef();

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

  const handleStartDateChange = (date) => {
    if (date) {
      setStartDate(date);
      setEndDate(null);
    }
  };

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

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

  useEffect(() => {
    if (nextIconDatePicker.current) {
      nextIconDatePicker.current.click();
      setLoading(false);
    }
  }, [nextIconDatePicker]);

  return (
    <div className="flex items-start custom-datepicker justify-evenly w-full">
      <div className="w-full md:w-1/2 lg:w-full xl:w-1/2 relative flex justify-center">
        <DatePickerJalali
          value={startDate}
          className={`w-full ${loading ? "opacity-0" : "opacity-100"}`}
          timePicker={false}
          nextIcon={
            <div className="flex md:hidden lg:flex xl:hidden">
              <NextIconDatePicker nextIconDatePicker={nextIconDatePicker} />
            </div>
          }
          prevIcon={
            <PrevIconDatePicker prevIconDatePicker={prevIconDatePicker} />
          }
          onChange={handleStartDateChange}
          disabledDates={(e) => handleDisableDate(e)}
        />
        {loading && (
          <Skeleton
            variant="rectangular"
            className="!w-[300px] !rounded-[6px] !absolute !top-0 !right-1/2 !translate-x-1/2 !z-10"
            height={352}
          />
        )}
      </div>
      <div className="w-1/2 hidden md:flex lg:hidden xl:flex">
        <div className="w-full relative flex justify-center">
          <DatePickerJalali
            value={endDate}
            timePicker={false}
            className={`w-full ${loading ? "opacity-0" : "opacity-100"}`}
            nextIcon={
              <NextIconDatePicker nextIconDatePicker={nextIconDatePicker} />
            }
            prevIcon={
              <div className="flex md:hidden lg:flex xl:hidden">
                <PrevIconDatePicker prevIconDatePicker={prevIconDatePicker} />
              </div>
            }
            onChange={handleEndDateChange}
            disabledDates={(e) => handleDisableDate(e)}
          />
          {loading && (
            <Skeleton
              variant="rectangular"
              className="!w-[300px] !rounded-[6px] !absolute !top-0 !right-1/2 !translate-x-1/2 !z-10"
              height={352}
            />
          )}
        </div>
      </div>
    </div>
  );
}

export default DatePicker;