"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

const tslib_1 = require("tslib");

const react_1 = tslib_1.__importDefault(require("react"));

const mobx_react_1 = require("xmobx/mobx-react");

const exotic_1 = require("exotic");

const deps_1 = require("../../deps");

const renderProps_1 = require("./renderProps");

const styled_1 = require("./styled");

let ActiveOption = class ActiveOption extends react_1.default.Component {
  constructor() {
    super(...arguments);

    this.handleKeyDownEvent = event => {
      if (deps_1.isEnter(event)) {
        this.handleClickEvent(event);
      }
    };

    this.handleClickEvent = event => {
      if (exotic_1.isFunction(this.props.onClick)) {
        this.props.onClick(event);
      }
    };
  }

  render() {
    const props = this.props;
    const {
      state,
      renderText,
      renderActiveAfterText,
      renderActiveBeforeText
    } = props;
    /**
     * @info role="listbox"
     * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
     * The listbox role is used for lists from which a user may select one or more items
     * which are static and, unlike HTML <select> elements, may contain images.
     */

    return react_1.default.createElement(styled_1.StyledSelect, {
      onClick: this.handleClickEvent,
      onKeyDown: this.handleKeyDownEvent,
      "data-type": "select",
      "aria-haspopup": "listbox",
      tabIndex: '0',
      role: 'listbox'
    }, renderActiveBeforeText(props, state), renderText(props, state), renderActiveAfterText(props, state));
  }

};
ActiveOption.defaultProps = {
  state: exotic_1.EMPTY_OBJ,
  renderText: renderProps_1.defaultRenderText,
  renderActiveAfterText: renderProps_1.defaultRenderActiveAfterText,
  renderActiveBeforeText: renderProps_1.defaultRenderActiveBeforeText
};
ActiveOption = tslib_1.__decorate([mobx_react_1.observer], ActiveOption);
exports.ActiveOption = ActiveOption;
exports.default = ActiveOption; //# sourceMappingURL=ActiveOption.js.map