import React, { useState, useEffect } from "react";
import DatePicker from "react-datepicker";
import Moment from "moment";
import Calendar from "../../public/images/Calendar.png";
import Image from "next/image";

type DateType = Date | null;

const RangePickerPage: React.FC<{ takeDate: any }> = ({ takeDate }) => {
  const [endDate, setEndDate] = useState(new Date());
  const [startDate, setStartDate] = useState(new Date());
  const [initialRender, setInitialRender] = useState(true);
  const handleDateChange = (dates: [DateType, DateType]) => {
    const [start, end] = dates;
    setStartDate(start);
    setEndDate(end);
  };

  useEffect(() => {
    if (initialRender) {
      setInitialRender(false);
      return;
    }

    if (startDate !== null && endDate !== null) {
      if (startDate.getTime() !== endDate.getTime()) {
        takeDate.takeDatePicker(
          Moment(startDate).format("YYYY-MM-DD"),
          Moment(endDate).format("YYYY-MM-DD"),
        );
      }
    }
  }, [endDate]);

  useEffect(() => {
    if (takeDate?.resetbtnclicked) {
      setStartDate(new Date());
      setEndDate(new Date());
    }
  }, [takeDate?.resetbtnclicked]);

  return (
    <div>
      <div className="calender_block">
        <Image src={Calendar} alt="" id="calender-icon" />
        <DatePicker
          className="form-select form-select-sm pe-0 py-1 fs-14"
          selected={startDate}
          onChange={handleDateChange}
          startDate={startDate}
          endDate={endDate}
          selectsRange
          dateFormat="yyyy-MM-dd"
          maxDate={Moment().toDate()}
        />
      </div>
    </div>
  );
};

export default RangePickerPage;