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

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

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

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

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

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

    handleUpdate(event) {
        this.value = event.target.value;
        this.props.onChange(this.value);
    }

    render() {
        const className = classNames('InputNumber', {
            InputNumber_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="InputNumberWrapper">
                {label}
                <div className="InputNumberBlock">
                    <input
                        type="number"
                        placeholder={this.props.placeholder}
                        id={id}
                        min={this.props.minAmount}
                        step={this.props.stepAmount}
                        className={className}
                        onChange={this.handleUpdate}
                        disabled={this.props.isDisabled}
                        value={this.value}
                    />
                    {this.props.showErrorLabel && (
                        <div className="InputNumberBlock__helpers">
                            <ErrorLabel errors={this.errors.slice()} />
                        </div>
                    )}
                </div>
            </div>
        );
    }
}

Input.propTypes = {
    elementId: PropTypes.string.isRequired,
    errors: PropTypes.array,
    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    onChange: PropTypes.func.isRequired,
    label: PropTypes.string,
    placeholder: PropTypes.string,
    isDisabled: PropTypes.bool,
    isRequired: PropTypes.bool,
    stepAmount: PropTypes.number,
    minAmount: PropTypes.number,
    showErrorLabel: PropTypes.bool,
};

Input.defaultProps = {
    errors: [],
    value: '',
    label: '',
    placeholder: '',
    isDisabled: true,
    isRequired: false,
    stepAmount: 1,
    minAmount: 0,
    showErrorLabel: true,
};

export default Input;