import React from "react";
import DatePicker from "react-datepicker";
import { useSelector, useDispatch } from "react-redux";
import { RootState } from "../../../../../../redux/store";
import {
  setVonDatum,
  setBisDatum,
} from "../../../../../../redux/slices/kabelueberwachungChartSlice";
import "react-datepicker/dist/react-datepicker.css";

// ✅ Props definieren
interface DateRangePickerProps {
  setVonDatum: (date: Date) => void;
  setBisDatum: (date: Date) => void;
  minDate: string;
  maxDate: string;
}

const DateRangePicker: React.FC<DateRangePickerProps> = ({
  setVonDatum,
  setBisDatum,
  minDate,
  maxDate,
}) => {
  const reduxVonDatum = useSelector(
    (state: RootState) => state.kabelueberwachungChart.vonDatum
  );
  const reduxBisDatum = useSelector(
    (state: RootState) => state.kabelueberwachungChart.bisDatum
  );

  return (
    <div className="flex space-x-4 items-center">
      <div className="flex items-center space-x-2">
        <label className="block text-sm font-semibold">Von</label>
        <DatePicker
          selected={reduxVonDatum ? new Date(reduxVonDatum) : new Date()}
          onChange={(date) => {
            if (date) {
              setVonDatum(date);
            }
          }}
          selectsStart
          startDate={reduxVonDatum ? new Date(reduxVonDatum) : new Date()}
          endDate={reduxBisDatum ? new Date(reduxBisDatum) : new Date()}
          minDate={new Date(minDate)}
          maxDate={new Date(maxDate)}
          dateFormat="dd.MM.yyyy"
          className="border px-2 py-1 rounded"
        />
      </div>

      <div className="flex items-center space-x-2">
        <label className="block text-sm font-semibold">Bis</label>
        <DatePicker
          selected={reduxBisDatum ? new Date(reduxBisDatum) : new Date()}
          onChange={(date) => {
            if (date) {
              setBisDatum(date);
            }
          }}
          selectsEnd
          startDate={reduxVonDatum ? new Date(reduxVonDatum) : new Date()}
          endDate={reduxBisDatum ? new Date(reduxBisDatum) : new Date()}
          minDate={new Date(minDate)}
          maxDate={new Date(maxDate)}
          dateFormat="dd.MM.yyyy"
          className="border px-2 py-1 rounded"
        />
      </div>
    </div>
  );
};

export default DateRangePicker;