// /components/common/DateRangePicker.tsx
import React, { useEffect } from "react";
import DatePicker from "react-datepicker";
import { useSelector, useDispatch } from "react-redux";
import { RootState } from "@/redux/store";
import { setVonDatum, setBisDatum } from "@/redux/slices/dateRangePickerSlice";
import "react-datepicker/dist/react-datepicker.css";

interface DateRangePickerProps {
  compact?: boolean; // reduziert horizontale Breite
  className?: string;
}

const DateRangePicker: React.FC<DateRangePickerProps> = ({
  compact = false,
  className = "",
}) => {
  const dispatch = useDispatch();

  const reduxVonDatum = useSelector(
    (state: RootState) => state.dateRangePicker.vonDatum
  );
  const reduxBisDatum = useSelector(
    (state: RootState) => state.dateRangePicker.bisDatum
  );

  const today = new Date();

  const thirtyDaysAgo = new Date();
  thirtyDaysAgo.setDate(today.getDate() - 30);

  const sixMonthsAgo = new Date();
  sixMonthsAgo.setMonth(today.getMonth() - 6);

  const parseISODate = (isoDate: string) => {
    const [year, month, day] = isoDate.split("-").map(Number);
    return new Date(year, month - 1, day);
  };

  const formatISO = (date: Date) => date.toLocaleDateString("sv-SE"); // = "YYYY-MM-DD"

  // Nur beim ersten Rendern initiale Werte setzen
  useEffect(() => {
    if (!reduxVonDatum) dispatch(setVonDatum(formatISO(thirtyDaysAgo)));
    if (!reduxBisDatum) dispatch(setBisDatum(formatISO(today)));
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [dispatch, reduxVonDatum, reduxBisDatum]);

  const gapClass = compact ? "space-x-2" : "space-x-4";
  const labelWidthClass = compact ? "w-6" : "w-auto";
  const inputWidthClass = compact ? "w-32" : "w-44"; // ca. 128px vs 176px

  return (
    <div className={`flex ${gapClass} items-center ${className}`}>
      <div
        className={`flex items-center space-x-1 ${compact ? "text-xs" : ""}`}
      >
        <label
          className={`block font-semibold ${
            compact ? "text-xs" : "text-sm"
          } ${labelWidthClass}`}
        >
          Von
        </label>
        <DatePicker
          selected={reduxVonDatum ? parseISODate(reduxVonDatum) : thirtyDaysAgo}
          onChange={(date) => {
            if (date) {
              dispatch(setVonDatum(formatISO(date)));
            }
          }}
          selectsStart
          startDate={
            reduxVonDatum ? parseISODate(reduxVonDatum) : thirtyDaysAgo
          }
          endDate={reduxBisDatum ? parseISODate(reduxBisDatum) : today}
          minDate={sixMonthsAgo}
          maxDate={today}
          dateFormat="dd.MM.yyyy"
          portalId="root-portal"
          popperClassName="custom-datepicker-popper"
          className={`border px-2 py-1 rounded ${inputWidthClass} ${
            compact ? "text-xs" : "text-sm"
          }`}
        />
      </div>
      <div
        className={`flex items-center space-x-1 ${compact ? "text-xs" : ""}`}
      >
        <label
          className={`block font-semibold ${
            compact ? "text-xs" : "text-sm"
          } ${labelWidthClass}`}
        >
          Bis
        </label>
        <DatePicker
          selected={reduxBisDatum ? parseISODate(reduxBisDatum) : today}
          onChange={(date) => {
            if (date) {
              dispatch(setBisDatum(formatISO(date)));
            }
          }}
          selectsEnd
          startDate={
            reduxVonDatum ? parseISODate(reduxVonDatum) : thirtyDaysAgo
          }
          endDate={reduxBisDatum ? parseISODate(reduxBisDatum) : today}
          minDate={sixMonthsAgo}
          maxDate={today}
          dateFormat="dd.MM.yyyy"
          portalId="root-portal"
          popperClassName="custom-datepicker-popper"
          className={`border px-2 py-1 rounded ${inputWidthClass} ${
            compact ? "text-xs" : "text-sm"
          }`}
        />
      </div>
    </div>
  );
};

export default DateRangePicker;