"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _DatePickerDropdownSt = require("./DatePickerDropdown.st.css.js");
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _DropdownBase = _interopRequireDefault(require("../../DropdownBase"));
var _TextButton = _interopRequireDefault(require("../../TextButton"));
var _IconThemeContext = require("../../WixDesignSystemIconThemeProvider/IconThemeContext");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Calendar/DatePickerDropdown/DatePickerDropdown.tsx";
var YEAR_ADD = 15;
class DropdownPicker extends _react.default.Component {
  constructor() {
    super(...arguments);
    this.state = {
      open: false,
      visibleOptions: this.props.options.slice(0, this.props.selectedId + YEAR_ADD)
    };
    this._onSelect = data => {
      var {
        onChange
      } = this.props;
      this.setState({
        open: false
      }, () => {
        if (typeof onChange === 'function') {
          onChange(data);
        }
      });
    };
    this._toggle = () => {
      this.setState({
        open: !this.state.open
      });
    };
    this._onKeyDown = (e, delegateKeyDown) => {
      var eventWasHandled = delegateKeyDown(e);
      var {
        open
      } = this.state;
      // We'll open the list when pressing the ArrowDown key
      if (!eventWasHandled && e.key === 'ArrowDown') {
        this._open();
        e.preventDefault();
        return;
      }

      // close on Escape
      if (e.key === 'Escape') {
        this._close();
        e.preventDefault();
      }

      // prevent TextButton onClick event
      if (open && (e.key === 'Enter' || e.key === 'Spacebar' || e.key === ' ')) {
        e.preventDefault();
      }
    };
    this._close = () => {
      this.setState({
        open: false
      });
    };
    this._open = () => {
      this.setState({
        open: true
      });
    };
    this._fetchMoreOptions = () => {
      var length = this.state.visibleOptions.length;
      this.setState(_ref => {
        var {
          visibleOptions
        } = _ref;
        return {
          visibleOptions: [...visibleOptions, ...this.props.options.slice(length, length + YEAR_ADD)]
        };
      });
    };
  }
  componentDidUpdate(prevProps) {
    if (prevProps.options.length !== this.props.options.length || this.props.selectedId >= this.state.visibleOptions.length) {
      this.setState({
        visibleOptions: this.props.options.slice(0, this.props.selectedId + YEAR_ADD)
      });
    }
  }
  render() {
    var {
      className,
      caption,
      options,
      dataHook,
      selectedId,
      ariaLabel,
      ariaLabelledBy
    } = this.props;
    var {
      open
    } = this.state;
    var finalAriaLabel = ariaLabel ? "".concat(ariaLabel, " ").concat(caption) : undefined;
    return /*#__PURE__*/_react.default.createElement(_IconThemeContext.IconThemeContext.Consumer, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 121,
        columnNumber: 7
      }
    }, _ref2 => {
      var _icons$DatePickerDrop;
      var {
        icons = {}
      } = _ref2;
      var ChevronDownIcon = ((_icons$DatePickerDrop = icons.DatePickerDropdown) == null ? void 0 : _icons$DatePickerDrop.ChevronDown) || _wixUiIconsCommon.ChevronDown;
      return /*#__PURE__*/_react.default.createElement("div", {
        className: (0, _DatePickerDropdownSt.st)(_DatePickerDropdownSt.classes.root, className),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 127,
          columnNumber: 13
        }
      }, /*#__PURE__*/_react.default.createElement(_DropdownBase.default, {
        dataHook: dataHook,
        className: _DatePickerDropdownSt.classes.dropdown,
        options: this.state.visibleOptions,
        onClickOutside: this._close,
        dynamicWidth: true,
        minWidth: 120,
        selectedId: selectedId,
        onSelect: this._onSelect,
        focusOnSelectedOption: true,
        open: open,
        infiniteScroll: true,
        hasMore: this.state.visibleOptions.length < options.length,
        loadMore: this._fetchMoreOptions,
        autoFocus: true,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 128,
          columnNumber: 15
        }
      }, _ref3 => {
        var {
          delegateKeyDown,
          listboxId,
          activeDescendantId
        } = _ref3;
        return /*#__PURE__*/_react.default.createElement(_TextButton.default, {
          className: _DatePickerDropdownSt.classes.caption,
          skin: "dark",
          size: "small",
          suffixIcon: /*#__PURE__*/_react.default.createElement(ChevronDownIcon, {
            __self: this,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 150,
              columnNumber: 35
            }
          }),
          onClick: this._toggle,
          dataHook: "".concat(dataHook, "-button"),
          onKeyDown: e => this._onKeyDown(e, delegateKeyDown),
          ariaLabel: finalAriaLabel,
          ariaLabelledBy: ariaLabelledBy,
          ariaHaspopup: "listbox",
          ariaExpanded: open,
          ariaControls: listboxId,
          ariaActiveDescendant: activeDescendantId,
          __self: this,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 146,
            columnNumber: 21
          }
        }, caption);
      }));
    });
  }
}
exports.default = DropdownPicker;
//# sourceMappingURL=DatePickerDropdown.js.map