import _createClass from "@babel/runtime/helpers/esm/createClass";
import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
var _dec, _class, _DateSelect;
import React, { createRef } from 'react';
import { responsiveLayout } from "../../../components/ResponsiveLayout/decorator";
import { getRandomID, isNonNullable } from "../../../lib/utils";
import { DatePickerLocaleHelper } from "../../../components/DatePicker/locale";
import { locale } from "../../../lib/locale/decorators";
import { ThemeContext } from "../../../lib/theming/ThemeContext";
import { cx } from "../../../lib/theming/Emotion";
import { createPropsGetter } from "../../../lib/createPropsGetter";
import { Select } from "../../../components/Select";
import { MenuItem } from "../../../components/MenuItem";
import { ArrowCollapseCVOpenIcon16Regular } from "../../icons2022/ArrowCollapseCVOpenIcon/ArrowCollapseCVOpenIcon16Regular";
import { globalClasses, styles } from "../DateSelect.styles";
var defaultMinMonth = 0;
var defaultMaxMonth = 11;
var defaultMinYear = 1900;
var defaultMaxYear = 2099;
var months = range(defaultMinMonth, defaultMaxMonth);
var years = range(defaultMinYear, defaultMaxYear);
function range(start, end) {
  return Array(end - start + 1).fill(null).map(function (_, index) {
    return start + index;
  });
}
export var DateSelectDataTids = {
  caption: 'DateSelect__caption',
  menuItem: 'DateSelect__menuItem',
  menu: 'DateSelect__menu'
};
var DATE_SELECT_POSITIONS = ['middle left', 'middle right', 'bottom left', 'top left', 'bottom right', 'top right'];
export var DateSelect = (_dec = locale('Calendar', DatePickerLocaleHelper), responsiveLayout(_class = _dec(_class = (_DateSelect = /*#__PURE__*/function (_React$PureComponent) {
  function DateSelect() {
    var _this;
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
    _this.getProps = createPropsGetter(DateSelect.defaultProps);
    _this.selectRef = /*#__PURE__*/createRef();
    _this.menuId = DateSelectDataTids.menu + getRandomID();
    _this.renderButton = function (params) {
      var _this$props = _this.props,
        value = _this$props.value,
        disabled = _this$props.disabled;
      var width = _this.getProps().width;
      var isInteractiveElement = !disabled;
      var Tag = isInteractiveElement ? 'button' : 'span';
      var rootProps = {
        className: cx(styles.root(_this.theme), disabled && styles.disabled()),
        style: {
          width: width
        },
        onClick: disabled ? undefined : params.onClick,
        'aria-expanded': isInteractiveElement ? params.opened : undefined,
        'aria-controls': !disabled ? _this.menuId : undefined,
        'aria-label': isInteractiveElement ? _this.locale.selectChosenAriaLabel + " " + (_this.getProps().type === 'year' ? _this.locale.selectYearAriaLabel : _this.locale.selectMonthAriaLabel) + " " + _this.getItem(value) : undefined
      };
      return /*#__PURE__*/(
        React.createElement(Tag, rootProps, /*#__PURE__*/
        React.createElement("div", {
          "data-tid": DateSelectDataTids.caption,
          className: styles.caption()
        }, _this.getItem(value)), isInteractiveElement && /*#__PURE__*/
        React.createElement(ArrowCollapseCVOpenIcon16Regular, {
          className: cx(globalClasses.arrow),
          color: "#ADADAD"
        }))
      );
    };
    _this.getItems = function () {
      var _this$getProps = _this.getProps(),
        value = _this$getProps.value,
        onValueChange = _this$getProps.onValueChange;
      var options = _this.isYearType ? years : months;
      return options.map(function (option) {
        var isSelected = option === value;
        var isOptionDisabled = _this.isOptionDisabled(option);
        return /*#__PURE__*/(
          React.createElement(MenuItem, {
            scrollIntoView: isSelected,
            disabled: isOptionDisabled,
            state: isSelected ? 'selected' : null,
            onClick: function onClick() {
              return onValueChange(option);
            },
            "aria-label": "\u0412\u044B\u0431\u0440\u0430\u0442\u044C " + (_this.isYearType ? 'год' : 'месяц') + " " + _this.getItem(option),
            "data-tid": DateSelectDataTids.menuItem,
            "data-disabled": isOptionDisabled,
            key: option
          }, _this.getItem(option))
        );
      });
    };
    _this.getItem = function (value) {
      var _this$locale$months;
      if (_this.isYearType) {
        return value;
      }
      return (_this$locale$months = _this.locale.months) == null ? void 0 : _this$locale$months[value];
    };
    return _this;
  }
  _inheritsLoose(DateSelect, _React$PureComponent);
  var _proto = DateSelect.prototype;
  _proto.render = function render() {
    var _this2 = this;
    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
      _this2.theme = theme;
      return _this2.renderMain();
    });
  };
  _proto.close = function close() {
    var _this$selectRef$curre;
    (_this$selectRef$curre = this.selectRef.current) == null || _this$selectRef$curre.close();
  };
  _proto.renderMain = function renderMain() {
    var _this$getProps2 = this.getProps(),
      value = _this$getProps2.value,
      disabled = _this$getProps2.disabled,
      onValueChange = _this$getProps2.onValueChange;
    var theme = {
      btnBorderRadiusSmall: this.theme.menuItemBorderRadius
    };
    return /*#__PURE__*/React.createElement(Select, {
      use: "text",
      value: value,
      ref: this.selectRef,
      theme: theme,
      disabled: disabled,
      _renderButton: this.renderButton,
      menuPos: "middle",
      positions: DATE_SELECT_POSITIONS,
      renderValue: this.getItem,
      items: this.getItems(),
      menuOffset: parseInt(this.theme.menuPaddingX) + parseInt(this.theme.menuItemPaddingXSmall),
      onValueChange: onValueChange,
      "aria-label": this.locale.selectChosenAriaLabel + " " + (this.isYearType ? this.locale.selectYearAriaLabel : this.locale.selectMonthAriaLabel) + " " + this.getItem(value)
    });
  };
  _proto.isOptionDisabled = function isOptionDisabled(option) {
    var _this$getProps3 = this.getProps(),
      minValue = _this$getProps3.minValue,
      maxValue = _this$getProps3.maxValue;
    if (isNonNullable(maxValue) && isNonNullable(minValue)) {
      return option > maxValue || option < minValue;
    }
    if (isNonNullable(minValue)) {
      return option < minValue;
    }
    if (isNonNullable(maxValue)) {
      return option > maxValue;
    }
  };
  return _createClass(DateSelect, [{
    key: "isYearType",
    get: function get() {
      return this.getProps().type === 'year';
    }
  }]);
}(React.PureComponent), _DateSelect.__KONTUR_REACT_UI__ = 'DateSelect', _DateSelect.displayName = 'DateSelect', _DateSelect.defaultProps = {
  type: 'year',
  width: 'auto'
}, _DateSelect)) || _class) || _class);