import React, { useCallback, useMemo, useState } from "react";
import { format, getMonth, getYear } from "date-fns";
import { StyledMonth, StyledMonths, StyledYearMonthPicker, StyledYearMonthPickerNavBar, StyledYearMonthPickerNavBarItem } from "./Styles";
export const YearMonthPicker = _ref => {
  let {
    month,
    onChange = () => null,
    isShown = true,
    onClick,
    text,
    selectedDays,
    selectionMode
  } = _ref;
  const [enteredTo, setEnteredTo] = useState();
  const currentYear = getYear(new Date());
  const months = Array.from({
    length: 12
  }, (_, i) => format(new Date(currentYear, i, 1), "MMMM"));
  const handleMonthChange = useCallback(e => {
    onChange(new Date(getYear(month), e.target.dataset.value));
    if (onClick) {
      onClick(e);
    }
  }, [month, onChange, onClick]);
  const onMouseEnterCallback = useCallback(e => {
    if (selectionMode === "quarterly") {
      setEnteredTo(Math.floor(e.target.getAttribute("data-value") / 3));
    }
  }, [selectionMode]);
  const renderMonths = useMemo(() => {
    return /*#__PURE__*/React.createElement(StyledMonths, {
      className: "c-monthPicker",
      "data-test": "months"
    }, months.map((singleMonth, i) => {
      return /*#__PURE__*/React.createElement(StyledMonth, {
        className: "c-monthPicker__month",
        key: i,
        onClick: handleMonthChange,
        onMouseEnter: onMouseEnterCallback,
        "data-value": i,
        "data-test": "month",
        $isCurrent: month.getFullYear() === new Date().getFullYear() && new Date().getMonth() === i,
        $isCurrentQuarter: Math.floor(i / 3) === enteredTo,
        $isSelected: selectedDays && !(selectedDays instanceof Date) && selectedDays.from && selectedDays.to && selectedDays.from.getFullYear() === getYear(month) && i >= getMonth(selectedDays.from) && i <= getMonth(selectedDays.to)
      }, singleMonth.substring(0, 3));
    }));
  }, [months, handleMonthChange, onMouseEnterCallback, enteredTo, selectedDays, month]);
  return /*#__PURE__*/React.createElement(StyledYearMonthPicker, {
    className: "c-DayPicker-Caption",
    role: "button"
  }, /*#__PURE__*/React.createElement(StyledYearMonthPickerNavBar, {
    role: "button"
  }, /*#__PURE__*/React.createElement(StyledYearMonthPickerNavBarItem, {
    "data-test": "show-picker",
    onClick: onClick
  }, text)), isShown && renderMonths);
};
YearMonthPicker.displayName = "YearMonthPicker";
//# sourceMappingURL=YearMonthPicker.js.map