"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 mobx_1 = require("xmobx/mobx");

const utils_1 = require("@skava/utils");

const exotic_1 = require("exotic");

const forms_1 = require("../../../..");

const SelectDropDown_1 = require("../../../../../components/molecules/SelectDropDown");

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

const InputChain_1 = require("../../../InputChain");

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

let SelectBoxInput = class SelectBoxInput extends InputChain_1.InputChain {
  static isSatisfiedByProps(props) {
    return props.type === 'select';
  }

  validateSelectField(args) {
    const state = this.get('state');

    if (forms_1.isValidSelect(args)) {
      state.isValidInput = true;
    } else {
      state.errorMessage = deps_1.errorMessage(state.errorMessageFor);
      state.isValidInput = false;
    }
  }

  handleChange(args) {
    const {
      onDropdownChange
    } = this.get('props');
    const state = this.get('state');
    const {
      label
    } = state;

    if (exotic_1.isFunction(onDropdownChange)) {
      onDropdownChange({
        value: args,
        state
      });
    }

    this.validateSelectField({
      value: args,
      label
    });
    state.setValue(args); // console.log('[Forms/SelectDropdown] handleDropdownChange()', args, state)
  }

  handleBlur() {
    const {
      value,
      label
    } = this.get('state');
    this.validateSelectField({
      value,
      label
    }); // console.log('[Forms/SelectDropdown] handleDropdownBlur()', state)
  }

  handleFocus() {
    const state = this.get('state');
    state.isValidInput = true; // console.log('[Forms/SelectDropdown] handleDropdownFocus()')
  }

  render() {
    const props = this.get('props');
    const state = this.get('state');

    const {
      label,
      labelText,
      wrapperClassName,
      options,
      className
    } = props,
          remainingProps = tslib_1.__rest(props, ["label", "labelText", "wrapperClassName", "options", "className"]);

    const renderActiveItem = (props, state) => {
      const passThroughProps = utils_1.omit(props, ['label']);
      return react_1.default.createElement(SelectDropDown_1.ActiveOption, Object.assign({
        state: state
      }, passThroughProps));
    };

    const errorMessageView = state.isValidInput === false && react_1.default.createElement(styled_1.StyledErrorMessage, {
      key: "textbox-error-message",
      text: state.errorMessage,
      className: 'input-error-message'
    });
    const attributes = Object.assign({
      options,
      className: `${className}${state.isValidInput ? '' : ' input-error'}`,
      onChange: this.handleChange,
      onBlur: this.handleBlur,
      onFocus: this.handleFocus,
      renderActiveItem
    }, remainingProps);
    console.info(attributes);
    return react_1.default.createElement(styled_1.SelectBoxWrapper, {
      className: wrapperClassName
    }, react_1.default.createElement(styled_1.StyledLabel, {
      className: 'label-text',
      content: labelText
    }), react_1.default.createElement(SelectDropDown_1.SelectDropDown, Object.assign({}, attributes, {
      "data-qa": props.dataQa
    })), errorMessageView);
  }

};

tslib_1.__decorate([mobx_1.action.bound], SelectBoxInput.prototype, "validateSelectField", null);

tslib_1.__decorate([mobx_1.action.bound], SelectBoxInput.prototype, "handleChange", null);

tslib_1.__decorate([mobx_1.action.bound], SelectBoxInput.prototype, "handleBlur", null);

tslib_1.__decorate([mobx_1.action.bound], SelectBoxInput.prototype, "handleFocus", null);

SelectBoxInput = tslib_1.__decorate([mobx_react_1.observer], SelectBoxInput);
exports.SelectBoxInput = SelectBoxInput;
exports.default = SelectBoxInput; //# sourceMappingURL=SelectBoxInput.js.map