import * as tslib_1 from "tslib";
import React from 'react';
import { isFunction } from 'exotic';
import { isValidSelect } from "../../../../../../forms";
import { ActiveOption, SelectDropDown } from "../../../../../../components/molecules/SelectDropDown";
import { errorMessage } from "../../../../../../forms/deps";
import { InputChain } from "../../../InputChain";
import { SelectBoxWrapper, StyledLabel, StyledErrorMessage } from "./styled";

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

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

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

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

      if (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.createElement(ActiveOption, Object.assign({
        label: label,
        state: state
      }, props));
    };

    const errorMessageView = state.isValidInput === false && React.createElement(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.createElement(SelectBoxWrapper, {
      className: wrapperClassName
    }, React.createElement(StyledLabel, {
      className: 'label-text',
      content: labelText
    }), React.createElement(SelectDropDown, Object.assign({}, attributes, {
      "data-qa": props.dataQa
    })), errorMessageView);
  }

}

export { SelectBoxInput };
export default SelectBoxInput; //# sourceMappingURL=SelectBoxInput.js.map