"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 SelectionState_1 = require("../../../../state/SelectionState");

const _deps_1 = require("../meta/_deps");

const Option_1 = require("../Option");

const _circularRenderProp_1 = require("../ActiveOption/_circularRenderProp");

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

const SelectBoundary_1 = require("./SelectBoundary");

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

let Select = class Select extends react_1.default.Component {
  constructor() {
    super(...arguments);
    /**
     * @todo could make this a normal prop
     */

    this.observableState = new SelectionState_1.SelectionState();

    this.handleChange = (event, item, state) => {
      console.debug('[adm:Select] handleChange()');
      this.observableState.handleToggleVisibility(); // this.observableState.setIsVisible(false)

      if (exotic_1.isFunction(this.props.onChange)) {
        console.info('[adm:Select] onChange passed in');
        /**
         * @todo should be this.props.onChange({event, item, state})
         */

        this.props.onChange(event, item, state);
      } else {
        console.warn('[adm:Select] had no onChangeProp');
      }
    };
    /**
     * @todo this code makes no sense
     *  - after setting isVisible to false, onBlur never calls
     */


    this.handleClickOutside = () => {
      const {
        onBlur
      } = this.props;

      if (this.observableState.isVisible) {
        this.observableState.setIsVisible(false);

        if (exotic_1.isFunction(onBlur)) {
          onBlur();
        }
      }
    };
  }

  handleDecoratingList() {
    const onChange = this.handleChange;
    const props = Object.assign({}, this.props, {
      onChange
    });
    console.debug('[Select] handleDecoratingList()');
    console.dir(props);
    this.observableState.decorateWithProps(props);
  }
  /**
   * @todo this area is probably the confusing part
   *       perhaps we separate the state decorating out of here
   */


  componentWillMount() {
    this.handleDecoratingList();
  }

  componentWillReact() {
    if (SelectionState_1.isEveryItemInListDecoratedWithOnClick(this.props) === false) {
      this.handleDecoratingList();
    }
  }

  render() {
    // computed & stateful
    const {
      props,
      observableState
    } = this;
    /**
     * @todo for perf & simplicity, change to props.list
     */

    const list = _deps_1.toList(props);

    const {
      isVisible,
      handleToggleVisibility
    } = observableState;
    const {
      onBlur,
      onFocus
    } = props;
    const {
      /**
       * @see https://www.typescriptlang.org/play/#src=const%20obj%20%3D%20%7B%7D%0D%0Aconst%20%7B%0D%0A%20%20defaulted%20%3D%20()%20%3D%3E%20'eh'%2C%0D%0A%7D%20%3D%20obj
       * @description inline `hide`
       * @todo probably should make a function that is the default for this
       *       and pass in props + observable state
       */
      onClickOutside = this.handleClickOutside,
      renderList,
      renderActiveItem,
      isDisabled,
      className,
      shouldBeAbsolute,
      dropDownAlignmentType
    } = props;
    /**
     * @todo !!! this is probably where we have issues, log here
     */

    const activeProps = Object.assign({}, observableState.selectedItem, props, observableState, {
      onClick: handleToggleVisibility
    });

    if (exotic_1.isFunction(onFocus) && isVisible) {
      onFocus();
    }

    const listView = renderList(Object.assign({}, this.props, {
      list
    }), this.observableState);
    const activeView = renderActiveItem(activeProps, observableState);
    const optionListView = react_1.default.createElement(styled_1.StyledOptionList, {
      list: list,
      children: listView,
      isVisible: isVisible,
      shouldBeAbsolute: shouldBeAbsolute,
      dropDownAlignmentType: dropDownAlignmentType
    });
    return react_1.default.createElement(SelectBoundary_1.SelectBoundary, {
      className: className,
      onClickOutside: onClickOutside,
      isDisabled: isDisabled,
      isVisible: isVisible,
      "data-qa": this.props['data-qa']
    }, activeView, optionListView);
  }

};
Select.defaultProps = {
  renderList: renderProps_1.renderList,
  renderItem: Option_1.renderItem,
  renderActiveItem: _circularRenderProp_1.renderActiveItem,
  shouldBeAbsolute: false,
  dropDownAlignmentType: false
};
Select = tslib_1.__decorate([mobx_react_1.observer], Select);
exports.Select = Select;
exports.default = Select; //# sourceMappingURL=Select.js.map