import { InputDatePicker } from "@common/components";
import { useEffect } from "react";
import { useAlertStore } from "../lib";

type DateRange = {
  from?: Date;
  to?: Date;
};

type InputDateRangePickerProps = {
  dateRange: DateRange;
  setDateRange: (dateRange: DateRange) => void;
};

function InputDateRangePicker({
  dateRange,
  setDateRange,
}: InputDateRangePickerProps) {
  const alert = useAlertStore((state) => state.setMessage);

  useEffect(() => {
    if (dateRange.from && dateRange.to && dateRange.from > dateRange.to) {
      alert("종료일이 시작일보다 이전일 수 없습니다.");
      setDateRange({ ...dateRange, to: dateRange.from });
    }
  }, [dateRange]);

  return (
    <>
      <InputDatePicker
        value={dateRange.from}
        onChange={(date) => {
          setDateRange({ ...dateRange, from: date });
        }}
      />
      ~
      <InputDatePicker
        value={dateRange.to}
        onChange={(date) => {
          setDateRange({ ...dateRange, to: date });
        }}
      />
    </>
  );
}

export { InputDateRangePicker };