"use strict";

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

const tslib_1 = require("tslib"); // modules


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

const mobx_react_1 = require("xmobx/mobx-react");

const exotic_1 = require("exotic");

const Error_1 = require("../../components/atoms/Error");

const PasswordIcon_1 = require("../../components/atoms/Icons/PasswordIcon");

const Icons_1 = require("../../components/atoms/Icons");

const InputState_1 = require("../../forms/input/InputState"); // local


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

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

const handlers_1 = require("./handlers");

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

const fixture_1 = require("./fixture");

function toState(props) {
  // or is instanceof
  if (exotic_1.isObj(props.state) && exotic_1.isFunction(props.state.setValue)) {
    return props.state;
  } else {
    console.log('staaaate', InputState_1.InputState);
    const state = new InputState_1.InputState();
    state.IS_DEFAULT = true;
    return state;
  }
}

let TextBox = class TextBox extends react_1.default.Component {
  constructor(props) {
    super(props); // @action

    this.focusMiddleware = () => {
      handlers_1.focusMiddleware.call(this, event, this.props, this.state);
    }; // @action


    this.blurMiddleware = event => {
      handlers_1.blurMiddleware.call(this, event, this.props, this.state);
    };

    this.handleFocus = event => {
      // @todo too much, simplify
      handlers_1.handleFocus(event, this.props, this.state);
      this.focusMiddleware();
    };

    this.handleBlur = event => {
      // @todo too much, simplify
      handlers_1.handleBlur(event, this.props, this.state);
      this.blurMiddleware(event);
    };

    this.handleChange = event => {
      handlers_1.handleChange.call(this, event, this.props, this.state);
    }; // show password functionality


    this.handleShowPassword = event => {
      if (this.state.type === 'password') {
        this.state.setType('text');
      } else {
        this.state.setType('password');
      }
    };

    this.renderPasswordIcon = type => {
      const isVisible = type !== 'password';
      return react_1.default.createElement(styled_1.StyledShowPasswordIcon, {
        onClick: this.handleShowPassword,
        key: "textbox-password-show-hide"
      }, react_1.default.createElement(PasswordIcon_1.PasswordIcon, {
        isVisible: isVisible
      }));
    };

    this.state = toState(this.props);
  } // ========= render


  render() {
    const {
      passthroughProps,
      validationProps,
      placeholderText,
      animatePlaceholder,
      name,
      ariaLabel,
      labelText,
      isDisabled,
      type,
      title,
      dataQa,
      qa,
      wrapperProps,
      inputIcon
    } = deps_1.toAttributes(this);
    const {
      renderPlaceholder,
      renderError,
      autoFocus
    } = this.props;
    const Wrap = renderProps_1.toWrap(this.props);
    const placeholderView = animatePlaceholder ? react_1.default.createElement(styled_1.StyledLabel, {
      key: "placeholder-label",
      className: 'input-box-label',
      isLabelOnTop: this.state.value !== ''
    }, placeholderText) : '';
    const placeholderAttribute = animatePlaceholder ? '' : placeholderText; // const placeholderView = renderPlaceholder(this.props, this.state)

    const labelTextView = labelText ? react_1.default.createElement(styled_1.StyledLabel, {
      key: "textbox-label",
      className: 'input-box-label',
      isLabelOnTop: true
    }, labelText) : '';
    const passwordIcon = (name === 'oldPassword' || name === 'password' || name === 'newPassword' || name === 'confirmPassword' || name === 'securityCode') && this.renderPasswordIcon(type); // const errorMessageView = renderError(this.props, this.state)

    const errorMessageView = this.state.isValidInput === false && react_1.default.createElement(Error_1.ErrorMessage, {
      key: "textbox-error-message",
      text: this.state.errorMessage,
      className: fixture_1.classes.errorMessage
    });
    const inputClassName = inputIcon ? (exotic_1.isSafe(inputIcon.className) ? inputIcon.className : '') + ' ' + (inputIcon.position === 'left' ? 'align-left' : '') : '';

    const handleIconClick = args => {
      const {
        onIconClick
      } = this.props;

      if (exotic_1.isFunction(onIconClick)) {
        onIconClick(args);
      }
    };

    const inputWithIcon = inputIcon ? react_1.default.createElement(styled_1.InputWithIconWrapper, {
      className: inputClassName,
      onClick: handleIconClick
    }, react_1.default.createElement(Icons_1.Icons, {
      breedType: inputIcon.breedType,
      type: inputIcon.type,
      breed: inputIcon.breed,
      fill: inputIcon.fill ? inputIcon.fill : 'black',
      stroke: inputIcon.stroke ? inputIcon.stroke : 'black',
      width: inputIcon.width ? inputIcon.width : '30px',
      height: inputIcon.height ? inputIcon.height : '30px'
    })) : '';
    const qaAttribute = dataQa ? dataQa : qa ? qa : '';
    return react_1.default.createElement(Wrap, Object.assign({}, wrapperProps), labelTextView, placeholderView, react_1.default.createElement(styled_1.StyledInputWrapper, {
      key: "textbox-input-wrap"
    }, react_1.default.createElement(styled_1.StyledInput, Object.assign({
      key: "textbox-input",
      type: type,
      onChange: this.handleChange,
      value: this.state.value,
      onFocus: this.handleFocus,
      onBlur: this.handleBlur,
      name: name,
      title: title
    }, passthroughProps, validationProps, {
      // @todo @fixme - not working in passthroughProps
      autoCompletemaxLength: this.props.autocomplete,
      placeholder: placeholderAttribute,
      disabled: isDisabled,
      "data-qa": qaAttribute,
      "aria-label": ariaLabel,
      autoFocus: autoFocus
    })), passwordIcon, errorMessageView, inputWithIcon));
  }

};
TextBox.defaultProps = {
  type: 'text',
  // customAttributes: EMPTY_OBJ,
  animatePlaceholder: true,
  wrapperClassName: '',
  className: '',
  renderPlaceholder: renderProps_1.renderPlaceholder,
  renderError: renderProps_1.renderError
};
TextBox = tslib_1.__decorate([mobx_react_1.observer], TextBox);
exports.TextBox = TextBox;
exports.TextInput = TextBox;
exports.default = TextBox; //# sourceMappingURL=TextBox.js.map