import React, { useState } from "react";
import DatePicker from "react-datepicker";
import { CalendarIcon } from "./svg/calendar";
import CustomDatePickerHeader from "./dateNavigation";
import { DatePickerWrapper, DateCont } from "./style";
import moment from "moment";
import useTranslation from "../../hooks/useTranslation.jsx";
import wordStore from "../../mc/wordStore.json";
const DatePickerCalender = ({
  borderColor,
  opacity,
  dateFormat,
  icon,
  ...props
}) => {
  const { findText } = useTranslation(wordStore);
  const [dateRange, setDateRange] = useState({
    startDate: new Date(),
    endDate: new Date(),
  });
  return (
    <DatePickerWrapper {...props}>
      <DateCont
        className="datepicker__wrapper"
        borderColor={borderColor}
        opacity={opacity}
      >
        <DatePicker
          selected={dateRange.endDate}
          endDate={dateRange.endDate}
          dateFormat={dateFormat ? dateFormat : "d MMM yyyy"}
          renderCustomHeader={({ date, decreaseMonth, increaseMonth }) => (
            <CustomDatePickerHeader
              selected={date}
              onMonthChange={(value) => {
                if (value === -1) {
                  decreaseMonth();
                } else if (value === 1) {
                  increaseMonth();
                }
              }}
            />
          )}
          onChange={(dates) =>
            setDateRange({
              ...dateRange,
              endDate: dates,
            })
          }
          calendarClassName={findText("datepicker_style")}
        />
        {icon ? icon : <CalendarIcon />}
      </DateCont>
    </DatePickerWrapper>
  );
};
export default DatePickerCalender;
