"use strict";

var __decorate = this && this.__decorate || function (decorators, target, key, desc) {
  var c = arguments.length,
      r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
      d;
  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  return c > 3 && r && Object.defineProperty(target, key, r), r;
};

var __importDefault = this && this.__importDefault || function (mod) {
  return mod && mod.__esModule ? mod : {
    "default": mod
  };
};

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

const react_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();

      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');
      }

      this.observableState.setIsVisible(false);
    };

    this.handleClickOutside = () => {
      this.observableState.setIsVisible(false);
    };
  }

  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;

    const handleToggle = () => {
      handleToggleVisibility();
      exotic_1.isFunction(onBlur) && isVisible && onBlur();
    };
    /**
     * @todo !!! this is probably where we have issues, log here
     */


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

    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']
    }, optionListView, activeView);
  }

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