"use strict";
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
/* @flow */
const React = __importStar(require("react"));
{
    TextFieldProps;
}
from;
'./types';
const classnames_1 = __importDefault(require("classnames"));
const prop_types_1 = __importDefault(require("prop-types"));
const withStyles_1 = __importDefault(require("components/hoc/withStyles"));
const FieldLabel_1 = __importDefault(require("components/bosons/FieldLabel"));
const ErrorBoundary_1 = __importDefault(require("components/hoc/ErrorBoundary"));
const styles_1 = __importDefault(require("./styles"));
class TextField extends React.Component {
    constructor() {
        super(...arguments);
        this.state = {
            value: this.props.value,
            isFocused: false,
            showingPassword: false,
        };
        this.focus = () => {
            if (this.inputRef) {
                this.inputRef.focus();
            }
        };
        this._handleOnChange = (e) => {
            this.setState({
                value: e.currentTarget.value,
            });
            if (this.props.onChangeText) {
                this.props.onChangeText(e.currentTarget.value);
            }
            if (this.props.onChange) {
                this.props.onChange(e);
            }
        };
        this._handleOnFocus = (e) => {
            this.setState({
                isFocused: true,
            });
            if (this.props.onFocus) {
                this.props.onFocus(e);
            }
        };
        this._handleOnBlur = (e) => {
            this.setState({
                isFocused: false,
            });
            if (this.props.onBlur) {
                this.props.onBlur(e);
            }
        };
        this._handleOnKeyPress = e => {
            if (this.props.isNumber) {
                if (/[\d\.]/.test(e.key)) {
                    if (this.props.onKeyPress) {
                        this.props.onKeyPress(e);
                    }
                    return true;
                }
                e.preventDefault();
                return false;
            }
            if (this.props.onKeyPress) {
                this.props.onKeyPress(e);
            }
            return true;
        };
        this._clearTextField = () => {
            this.setState({
                value: '',
            });
            if (this.props.onChangeText) {
                this.props.onChangeText('');
            }
            if (this.inputRef) {
                this.inputRef.focus();
            }
        };
        this._showPassowrd = () => {
            this.inputRef.type = 'text';
            this.setState({
                showingPassword: true,
            });
        };
        this._hidePassowrd = () => {
            this.inputRef.type = 'password';
            this.setState({
                showingPassword: false,
            });
        };
    }
    componentDidMount() {
        this.props.getRef(this);
    }
    componentDidUpdate(prevProps) {
        const props = this.props;
        const state = this.state;
        if (props.value !== prevProps.value || state.value !== props.value) {
            this.setState({
                value: props.value,
            });
        }
    }
    _renderIcon() {
        let { icon, classes } = this.props;
        if (!icon) {
            return null;
        }
        return React.createElement("div", { className: classnames_1.default(classes.leftIcon) }, icon);
    }
    _renderTextInput() {
        const { classes, multiline } = this.props;
        if (multiline) {
            return (React.createElement("textarea", { className: classnames_1.default(classes.textInput, classes.textarea), ref: (ref) => {
                    this.inputRef = ref;
                }, value: this.state.value, placeholder: this.props.placeholder, autoFocus: this.props.autoFocus, disabled: this.props.disabled, id: this.props.id, name: this.props.name, onBlur: this._handleOnBlur, onChange: this._handleOnChange, onFocus: this._handleOnFocus, onKeyDown: this.props.onKeyDown, onKeyPress: this.props.onKeyPress, onKeyUp: this.props.onKeyUp, readOnly: this.props.isReadOnly, required: this.props.required }));
        }
        return (React.createElement("input", { className: classnames_1.default(classes.textInput), ref: (ref) => {
                this.inputRef = ref;
            }, value: this.state.value, placeholder: this.props.placeholder, autoComplete: this.props.autoComplete, autoFocus: this.props.autoFocus, disabled: this.props.disabled, id: this.props.id, name: this.props.name, onBlur: this._handleOnBlur, onChange: this._handleOnChange, onFocus: this._handleOnFocus, onKeyDown: this.props.onKeyDown, onKeyPress: this._handleOnKeyPress, onKeyUp: this.props.onKeyUp, readOnly: this.props.isReadOnly, required: this.props.required, type: this.props.type, maxLength: this.props.maxlength }));
    }
    _renderClearIcon() {
        const { classes } = this.props;
        if (!this.state.value) {
            return null;
        }
        return (React.createElement("span", { className: classnames_1.default(classes.xIcon), onClick: this._clearTextField },
            React.createElement("i", { className: "icon icon-close" })));
    }
    _renderShowPasswordIcon() {
        const { classes } = this.props;
        if (this.props.type !== 'password' || !this.state.value) {
            return null;
        }
        if (this.state.showingPassword) {
            return (React.createElement("span", { onClick: this._hidePassowrd, className: classnames_1.default(classes.eyeIcon, 'show') },
                React.createElement("i", { className: 'icon icon-show' })));
        }
        return (React.createElement("span", { onClick: this._showPassowrd, className: classnames_1.default(classes.eyeIcon) },
            React.createElement("i", { className: 'icon icon-show' })));
    }
    render() {
        let { classes, label, error, showErrorMessage, showClearIcon, extraLinkWithLabel, disabled, isReadOnly, multiline, } = this.props;
        const wrapperClass = classnames_1.default(classes.textInputWrapper, {
            'top-border-radius': this.props.applyTopBorderRadius,
            'bottom-border-radius': this.props.applyBottomBorderRadius,
            'no-border-radius': this.props.noBorderRadius,
            focus: this.state.isFocused || this.state.value,
            'is-filled': Boolean(this.state.value),
        });
        const componentClass = classnames_1.default(classes.component, {
            error: Boolean(error),
        });
        const errorClass = classnames_1.default(classes.error);
        return (React.createElement(ErrorBoundary_1.default, null,
            React.createElement("div", { className: componentClass },
                (Boolean(label) || Boolean(extraLinkWithLabel)) && (React.createElement(FieldLabel_1.default, { label: label, extraLinkWithLabel: extraLinkWithLabel, onExtraLinkClicked: this.props.onExtraLinkClicked, classes: { label: classes.label } })),
                React.createElement("div", { className: wrapperClass },
                    this._renderIcon(),
                    this._renderTextInput(),
                    showClearIcon &&
                        !disabled &&
                        !isReadOnly &&
                        !multiline &&
                        this._renderClearIcon(),
                    !disabled && !isReadOnly && this._renderShowPasswordIcon()),
                Boolean(error) &&
                    showErrorMessage && React.createElement("div", { className: errorClass }, error))));
    }
}
TextField.propTypes = {
    applyBottomBorderRadius: prop_types_1.default.bool,
    applyTopBorderRadius: prop_types_1.default.bool,
    autoComplete: prop_types_1.default.oneOf(['on', 'off']),
    autoFocus: prop_types_1.default.bool,
    classes: prop_types_1.default.object,
    disabled: prop_types_1.default.bool,
    error: prop_types_1.default.string,
    errorColor: prop_types_1.default.string,
    extraLinkWithLabel: prop_types_1.default.string,
    icon: prop_types_1.default.node,
    id: prop_types_1.default.string,
    isReadOnly: prop_types_1.default.bool,
    label: prop_types_1.default.string,
    multiline: prop_types_1.default.bool,
    name: prop_types_1.default.string,
    noBorderRadius: prop_types_1.default.bool,
    onBlur: prop_types_1.default.func,
    onChange: prop_types_1.default.func,
    onChangeText: prop_types_1.default.func,
    onExtraLinkClicked: prop_types_1.default.func,
    onFocus: prop_types_1.default.func,
    onKeyDown: prop_types_1.default.func,
    onKeyPress: prop_types_1.default.func,
    onKeyUp: prop_types_1.default.func,
    placeholder: prop_types_1.default.string,
    placeholderColor: prop_types_1.default.string,
    required: prop_types_1.default.bool,
    showClearIcon: prop_types_1.default.bool,
    showErrorMessage: prop_types_1.default.bool,
    type: prop_types_1.default.string,
    value: prop_types_1.default.string,
    maxlength: prop_types_1.default.number,
    isNumber: prop_types_1.default.bool,
    getRef: prop_types_1.default.func,
};
TextField.defaultProps = {
    autoComplete: 'on',
    type: 'text',
    disabled: false,
    isReadOnly: false,
    required: false,
    error: '',
    showErrorMessage: true,
    label: '',
    name: '',
    value: '',
    onBlur: (e) => { },
    onChangeText: () => { },
    onFocus: () => { },
    onKeyDown: () => { },
    onKeyPress: () => { },
    onKeyUp: () => { },
    autoFocus: false,
    showClearIcon: false,
    extraLinkWithLabel: '',
    onExtraLinkClicked: () => { },
    multiline: false,
    maxlength: undefined,
    isNumber: false,
    getRef: () => { },
};
exports.default = withStyles_1.default(styles_1.default)(TextField);
//# sourceMappingURL=index.js.map