"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
// modules
const React = require("react");
const mobx_react_1 = require("xmobx/mobx-react");
const exotic_1 = require("exotic");
const ui_1 = require("@skava/ui");
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', State)
        const state = new InputState_1.InputState();
        state.IS_DEFAULT = true;
        return state;
    }
}
let TextBox = class TextBox extends React.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.createElement(styled_1.StyledShowPasswordIcon, { onClick: this.handleShowPassword, key: "textbox-password-show-hide" },
                React.createElement(ui_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 } = this.props;
        const Wrap = renderProps_1.toWrap(this.props);
        const placeholderView = animatePlaceholder ? (React.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.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.createElement(ui_1.Error, { 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.createElement(styled_1.InputWithIconWrapper, { className: inputClassName, onClick: handleIconClick },
            React.createElement(ui_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.createElement(Wrap, Object.assign({}, wrapperProps),
            labelTextView,
            placeholderView,
            React.createElement(styled_1.StyledInputWrapper, { key: "textbox-input-wrap" },
                React.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
                    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: 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