"use strict";

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

const tslib_1 = require("tslib");

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

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");

class SelectBoxInput extends InputChain_1.InputChain {
  constructor() {
    super(...arguments);

    this.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;
      }
    };

    this.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)
    };

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

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

  static isSatisfiedByProps(props) {
    return props.type === 'select';
  }

  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) => {
      return react_1.default.createElement(SelectDropDown_1.ActiveOption, Object.assign({
        label: label,
        state: state
      }, props));
    };

    const errorMessageView = state.isValidInput === false && react_1.default.createElement(styled_1.StyledErrorMessage, {
      key: "textbox-error-message",
      text: state.errorMessage,
      className: 'input-error-message'
    }); // state.isValidInput = true

    const attributes = Object.assign({
      renderActiveItem,
      options,
      className: `${className}${state.isValidInput ? '' : ' input-error'}`,
      onChange: this.handleChange,
      onBlur: this.handleBlur,
      onFocus: this.handleFocus
    }, 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);
  }

}

exports.SelectBoxInput = SelectBoxInput;
exports.default = SelectBoxInput; //# sourceMappingURL=SelectBoxInput.js.map