"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
// modules
const react_1 = __importDefault(require("react"));
const mobx_react_1 = require("xmobx/mobx-react");
const exotic_1 = require("exotic");
const Error_1 = require("atoms/Error");
const index_1 = require("atoms/Icons/FormPasswordIcon/index");
// local
const State_1 = __importDefault(require("./State"));
const _elements_1 = require("./_elements");
const deps_1 = require("./deps");
const handlers_1 = require("./handlers");
const _renderProps_1 = require("./_renderProps");
function toState(props) {
    // or is instanceof
    if (exotic_1.isObj(props.state) && exotic_1.isFunction(props.state.setValue)) {
        return props.state;
    }
    else {
        const state = new State_1.default();
        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
            // handleBlur.call(this, this.props, this.state)
            this.blurMiddleware(event);
        };
        this.handleChange = event => {
            handlers_1.handleChange.call(this, event, this.props, this.state);
        };
        this.renderPasswordIcon = type => {
            const passwordVisible = type !== 'password';
            return (react_1.default.createElement(_elements_1.StyledShowPasswordIcon, { onClick: this.handleShowPassword, key: "textbox-password-show-hide" },
                react_1.default.createElement(index_1.FormPasswordIcon, { passwordVisible: passwordVisible })));
        };
        this.state = toState(this.props);
    }
    // ========= render
    render() {
        const { passthroughProps, validationProps, placeholderText, animatePlaceholder, name, ariaLabel, labelText, isDisabled, type, title, dataQa, wrapperProps, } = deps_1.toAttributes(this);
        const { renderPlaceholder, renderError } = this.props;
        const Wrap = _renderProps_1.toWrap(this.props);
        const placeholderView = animatePlaceholder ? (react_1.default.createElement(_elements_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(_elements_1.StyledLabel, { key: "textbox-label", className: 'input-box-label', isLabelOnTop: true }, labelText)) : ('');
        const passwordIcon = (name === 'password' || 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 }));
        return (react_1.default.createElement(Wrap, Object.assign({}, wrapperProps),
            labelTextView,
            placeholderView,
            react_1.default.createElement(_elements_1.StyledInputWrapper, { key: "textbox-input-wrap" },
                react_1.default.createElement(_elements_1.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": dataQa, "aria-label": ariaLabel })),
                passwordIcon,
                errorMessageView)));
    }
};
// this is used on some exprots, should deprecate
TextBox.State = State_1.default;
TextBox.defaultProps = {
    type: 'text',
    // customAttributes: EMPTY_OBJ,
    animatePlaceholder: true,
    wrapperClassName: '',
    className: '',
    renderPlaceholder: _renderProps_1.renderPlaceholder,
    renderError: _renderProps_1.renderError,
};
TextBox = __decorate([
    mobx_react_1.observer
], TextBox);
exports.TextBox = TextBox;
exports.TextInput = TextBox;
exports.default = TextBox;
//# sourceMappingURL=TextBox.js.map