import { slicedToArray as _slicedToArray, defineProperty as _defineProperty } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { useRef, useCallback, useEffect, Fragment } from 'react';
import { DateStructureItem } from '../DateStructureItem/DateStructureItem.js';
import { tokens, innerTokens } from '../../Calendar.tokens.js';
import { StyledCalendarDays, StyledCalendarDaysHint } from './CalendarDays.styles.js';
import { useDays } from '../../hooks/useDays.js';
import { canSelectDate } from '../../utils/calendarGridHelper.js';
import { isSelectProcess, isSameDay, getInRange, getSideInRange } from '../../utils/calendarRangeHelper.js';
import { I18N, SHORT_DAY_NAMES, FULL_DAY_NAMES, ROW_STEP } from '../../utils/constants.js';

/**
 * Компонент дней в календаре.
 */
var CalendarDays = function CalendarDays(_ref) {
  var currentDate = _ref.date,
    value = _ref.value,
    eventList = _ref.eventList,
    disabledList = _ref.disabledList,
    min = _ref.min,
    max = _ref.max,
    includeEdgeDates = _ref.includeEdgeDates,
    hoveredDay = _ref.hoveredDay,
    selectIndexes = _ref.selectIndexes,
    isDouble = _ref.isDouble,
    isSecond = _ref.isSecond,
    outerRefs = _ref.outerRefs,
    onChangeDay = _ref.onChangeDay,
    onHoverDay = _ref.onHoverDay,
    onTriggerEventTooltip = _ref.onTriggerEventTooltip,
    onSetSelected = _ref.onSetSelected,
    onKeyDown = _ref.onKeyDown,
    _ref$locale = _ref.locale,
    locale = _ref$locale === void 0 ? 'ru' : _ref$locale;
  var _useDays = useDays({
      date: currentDate,
      value: value,
      eventList: eventList,
      disabledList: disabledList,
      min: min,
      max: max,
      includeEdgeDates: includeEdgeDates
    }),
    _useDays2 = _slicedToArray(_useDays, 2),
    days = _useDays2[0],
    selected = _useDays2[1];
  var selectedRef = useRef(selected);
  var onSetSelectedRef = useRef(onSetSelected);
  var noopRef = useRef(null);
  var offset = isSecond ? ROW_STEP : 0;
  var dayItemTokens = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(innerTokens.dateStructureFontFamily), "var(".concat(tokens.calendarDayFontFamily, ")")), "".concat(innerTokens.dateStructureFontSize), "var(".concat(tokens.calendarDayFontSize, ")")), "".concat(innerTokens.dateStructureFontWeight), "var(".concat(tokens.calendarDayFontWeight, ")")), "".concat(innerTokens.dateStructureFontLineHeight), "var(".concat(tokens.calendarDayFontLineHeight, ")")), "".concat(innerTokens.dateStructureFontLetterSpacing), "var(".concat(tokens.calendarDayFontLetterSpacing, ")")), "".concat(innerTokens.dateStructureFontStyle), "var(".concat(tokens.calendarDayFontStyle, ")")), "".concat(innerTokens.dateStructureSelectedFontWeight), "var(".concat(tokens.calendarDaySelectedFontWeight, ")")), "".concat(innerTokens.dateStructureBorderRadius), "var(".concat(tokens.calendarDayItemBorderRadius, ")"));
  var getSelectedDate = useCallback(function (event) {
    var _event$currentTarget$ = event.currentTarget.dataset,
      day = _event$currentTarget$.day,
      monthIndex = _event$currentTarget$.monthIndex,
      year = _event$currentTarget$.year;
    var selectedDate = {
      day: Number(day),
      monthIndex: Number(monthIndex),
      year: Number(year)
    };
    if (!canSelectDate(selectedDate, value, disabledList)) {
      return;
    }
    return selectedDate;
  }, [disabledList, value]);
  var handleOnChangeDay = useCallback(function (i, j) {
    return function (event) {
      var selectedDate = getSelectedDate(event);
      if (!selectedDate) {
        return;
      }
      onChangeDay(selectedDate, [i + offset, j]);
      if (isSelectProcess(value)) {
        onHoverDay === null || onHoverDay === void 0 || onHoverDay(undefined);
      }
    };
  }, [getSelectedDate, onChangeDay, offset, value, onHoverDay]);
  var handleOnHoverDay = useCallback(function (event) {
    var selectedDate = getSelectedDate(event);
    var isSelectedDone = Array.isArray(value) && value[0] && value[1];
    if (!selectedDate || !Array.isArray(value) || isSelectedDone) {
      return;
    }
    onHoverDay === null || onHoverDay === void 0 || onHoverDay(selectedDate);
  }, [getSelectedDate, onHoverDay, value]);
  var handleMouseOutGrid = function handleMouseOutGrid() {
    onHoverDay === null || onHoverDay === void 0 || onHoverDay(undefined);
    onTriggerEventTooltip === null || onTriggerEventTooltip === void 0 || onTriggerEventTooltip(noopRef, []);
  };
  var getRefs = function getRefs(element, isDayInCurrentMonth, i, j) {
    if (isDayInCurrentMonth) {
      if (!outerRefs.current[i + offset]) {
        outerRefs.current[i + offset] = [];
      }
      outerRefs.current[i + offset][j] = element;
    }
  };
  useEffect(function () {
    if (selectedRef.current) {
      var _onSetSelectedRef$cur;
      (_onSetSelectedRef$cur = onSetSelectedRef.current) === null || _onSetSelectedRef$cur === void 0 || _onSetSelectedRef$cur.call(onSetSelectedRef, selectedRef.current);
    }
  }, []);
  return /*#__PURE__*/React__default.createElement(StyledCalendarDays, {
    role: "grid",
    "aria-labelledby": "id-grid-label",
    onKeyDown: onKeyDown,
    onMouseLeave: handleMouseOutGrid
  }, /*#__PURE__*/React__default.createElement(StyledCalendarDaysHint, {
    id: "withShift"
  }, I18N.navigationByShift[locale]), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, SHORT_DAY_NAMES[locale].map(function (name) {
    return /*#__PURE__*/React__default.createElement(DateStructureItem, {
      role: "columnheader",
      "aria-label": FULL_DAY_NAMES[locale][name],
      key: name,
      dayOfWeek: true,
      day: name,
      style: dayItemTokens
    }, name);
  })), days.map(function (day, i) {
    return /*#__PURE__*/React__default.createElement(Fragment, {
      key: i
    }, day.map(function (_ref2, j) {
      var date = _ref2.date,
        events = _ref2.events,
        disabled = _ref2.disabled,
        isSelected = _ref2.isSelected,
        isCurrent = _ref2.isCurrent,
        isDayInCurrentMonth = _ref2.isDayInCurrentMonth,
        inRange = _ref2.inRange,
        _ref2$isOutOfMinMaxRa = _ref2.isOutOfMinMaxRange,
        isOutOfMinMaxRange = _ref2$isOutOfMinMaxRa === void 0 ? false : _ref2$isOutOfMinMaxRa,
        disabledArrowKey = _ref2.disabledArrowKey,
        disabledDates = _ref2.disabledDates;
      return /*#__PURE__*/React__default.createElement(DateStructureItem, {
        ref: function ref(element) {
          return getRefs(element, Boolean(isDayInCurrentMonth), i, j);
        },
        style: dayItemTokens,
        eventList: events,
        disabled: disabled,
        day: date.day,
        year: date.year,
        monthIndex: date.monthIndex,
        isFocused: i + offset === (selectIndexes === null || selectIndexes === void 0 ? void 0 : selectIndexes[0]) && j === (selectIndexes === null || selectIndexes === void 0 ? void 0 : selectIndexes[1]) && !isOutOfMinMaxRange,
        isSelected: isSelected,
        isCurrent: isCurrent,
        isDayInCurrentMonth: isDayInCurrentMonth,
        isDouble: isDouble,
        isHovered: isSameDay(date, hoveredDay),
        inRange: getInRange(value, date, hoveredDay, inRange),
        sideInRange: getSideInRange(value, date, hoveredDay, isSelected),
        onClick: disabled ? undefined : handleOnChangeDay(i, j),
        onMouseOver: disabled ? undefined : handleOnHoverDay,
        onTriggerEventTooltip: onTriggerEventTooltip,
        key: "StyledDay-".concat(i, "-").concat(j),
        role: "gridcell",
        disabledArrowKey: disabledArrowKey,
        disabledMonths: disabledDates
      }, date.day);
    }));
  }));
};

export { CalendarDays };
