import React, {Component} from 'react';
import {observer} from 'mobx-react';
import {observable} from 'mobx';
import PropTypes from 'prop-types';
import className from 'classnames';
import ErrorLabel from '../ErrorLabel';
import Label from '../Label';
import TextMaxLength from '../TextMaxLength';
import './styles.scss';

@observer
class InputText extends Component {
    constructor(props) {
        super(props);

        this.value = props.value;
        this.errors = props.errors;

        this.handleInputChange = this.handleInputChange.bind(this);
    }

    componentWillReceiveProps(props) {
        this.value = props.value;
        this.errors = props.errors;
    }

    @observable value = '';
    @observable errors = [];

    handleInputChange(event) {
        this.value = event.target.value;
        this.props.onChange({[this.props.name]: this.value});
    }

    render() {
        const inputClassName = className('InputText', {
            InputText_danger: this.errors.length,
        });
        const id = this.props.elementId;
        const label = this.props.label && (<Label
            label={this.props.label}
            for={id}
            required={this.props.isRequired}
        />);

        return (
            <div className="InputTextWrapper">
                {label}
                <div className="InputTextBlock">
                    <input
                        pattern={this.props.pattern || undefined}
                        type="text"
                        placeholder={this.props.placeholder}
                        id={id}
                        name={this.props.name}
                        className={inputClassName}
                        onChange={this.handleInputChange}
                        onBlur={this.handleInputChange}
                        disabled={this.props.isDisabled}
                        value={this.value}
                    />
                    <div className="InputTextBlock__helpers">
                        <TextMaxLength
                            maxLength={this.props.maxLength}
                            value={this.value}
                        />
                        {this.props.showErrorLabel && <ErrorLabel errors={this.errors.slice()} />}
                    </div>
                </div>
            </div>
        );
    }
}

InputText.propTypes = {
    onChange: PropTypes.func.isRequired,
    pattern: PropTypes.string,
    elementId: PropTypes.string.isRequired,
    errors: PropTypes.array,
    maxLength: PropTypes.number,
    label: PropTypes.string,
    name: PropTypes.string.isRequired,
    placeholder: PropTypes.string,
    isDisabled: PropTypes.bool,
    isRequired: PropTypes.bool,
    showErrorLabel: PropTypes.bool,
    value: PropTypes.string,
};

InputText.defaultProps = {
    errors: [],
    pattern: '',
    label: '',
    placeholder: '',
    maxLength: 0,
    isDisabled: false,
    isRequired: false,
    showErrorLabel: true,
    value: '',
};

export default InputText;