import React from 'react';
import ErrorField from './ErrorField';

const inputIcon = {
    text: 'hide',
    password: 'show'
};

class InputField extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isPassword: props.type === 'password',
            type: props.type || 'text'
        };
    }

    getInputIcon = () => {
        const { isPassword, type } = this.state;
        if (!isPassword) return null;
        const className = `input-field-icon input-field-icon-${inputIcon[type]}`;
        return <i className={className} onClick={this.toggleInputType} />;
    };

    toggleInputType = ev => {
        ev.preventDefault();
        this.setState({ type: this.state.type === 'password' ? 'text' : 'password' });
    };

    render() {
        const { label, icon, input, meta, ...restProps } = this.props;
        return (
            <div className={`input-element ${meta && meta.touched && !meta.valid && 'input-element__error'}`}>
                <div className="input-label">{label}</div>
                {icon && <i className={`input-icon ${icon}`} />}
                <div className="input-field-wrap">
                    <input className="input-field" {...restProps} {...input} type={this.state.type} />
                    {this.getInputIcon()}
                </div>
                {meta && <ErrorField touched={meta.touched} error={meta.error} />}
            </div>
        );
    }
}

export default InputField;