import * as tslib_1 from "tslib"; // modules

import React from 'react';
import { observer } from 'xmobx/mobx-react';
import { isSafe, isFunction, isObj } from 'exotic';
import { ErrorMessage } from "../../../components/atoms/Error";
import { PasswordIcon } from "../../../components/atoms/Icons/PasswordIcon";
import { Icons } from "../../../components/atoms/Icons";
import { InputState as State } from "../../../forms/input/InputState"; // local

import { StyledInput, StyledLabel, StyledInputWrapper, StyledShowPasswordIcon, InputWithIconWrapper } from "./styled";
import { toAttributes } from "./deps";
import { blurMiddleware, focusMiddleware, handleBlur, handleFocus, handleChange } from "./handlers";
import { renderPlaceholder as defaultRenderPlaceholder, renderError as defaultRenderError, toWrap } from "./renderProps";
import { classes } from "./fixture";

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

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

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


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

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

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

    this.handleChange = event => {
      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.createElement(StyledShowPasswordIcon, {
        onClick: this.handleShowPassword,
        key: "textbox-password-show-hide"
      }, React.createElement(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
    } = toAttributes(this);
    const {
      renderPlaceholder,
      renderError
    } = this.props;
    const Wrap = toWrap(this.props);
    const placeholderView = animatePlaceholder ? React.createElement(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.createElement(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.createElement(ErrorMessage, {
      key: "textbox-error-message",
      text: this.state.errorMessage,
      className: classes.errorMessage
    });
    const inputClassName = inputIcon ? (isSafe(inputIcon.className) ? inputIcon.className : '') + ' ' + (inputIcon.position === 'left' ? 'align-left' : '') : '';
    const inputWithIcon = inputIcon ? React.createElement(InputWithIconWrapper, {
      className: inputClassName
    }, React.createElement(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.createElement(Wrap, Object.assign({}, wrapperProps), labelTextView, placeholderView, React.createElement(StyledInputWrapper, {
      key: "textbox-input-wrap"
    }, React.createElement(StyledInput, Object.assign({
      key: "textbox-input",
      type: type,
      onChange: this.handleChange,
      value: this.state.value || this.props.value,
      onFocus: this.handleFocus,
      onBlur: this.handleBlur,
      name: name,
      title: title
    }, passthroughProps, validationProps, {
      // @todo @fixme - not working in passthroughProps
      autoComplete: this.props.autocomplete,
      placeholder: placeholderAttribute,
      disabled: isDisabled,
      "data-qa": qaAttribute,
      "aria-label": ariaLabel
    })), passwordIcon, errorMessageView, inputWithIcon));
  }

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