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

class Textarea extends Component {
    constructor(props) {
        super(props);

        this.state = {
            value: props.value,
            errors: props.errors,
            className: props.className,
        };

        this.handleTextareaChange = this.handleTextareaChange.bind(this);
        this.handleTextareaBlur = this.handleTextareaBlur.bind(this);
    }

    componentWillReceiveProps(props) {
        this.setState({
            ...props,
            errors: props.errors.length ? props.errors : [],
            className: props.errors.length ? 'danger' : '',
        });
    }

    handleTextareaChange(event) {
        const value = event.target.value;

        this.setState({
            value,
        }, () => {
            this.props.onChange({[this.props.name]: this.state.value});
        });
    }

    handleTextareaBlur(event) {
        const value = event.target.value;

        this.setState({
            value,
        }, () => {
            this.props.onBlur({[this.props.name]: this.state.value});
        });
    }

    render() {
        const className = `Textarea_${this.state.className}`;
        const id = this.props.elementId;
        const label = this.props.label && (<Label
            label={this.props.label}
            for={id}
            required={this.props.isRequired}
        />);

        return (
            <div className="TextareaWrapper">
                {label}
                <div className="TextareaBlock">
                    <textarea
                        type="text"
                        id={id}
                        name={this.props.name}
                        className={`Textarea ${className}`}
                        onChange={this.handleTextareaChange}
                        onBlur={this.handleTextareaBlur}
                        disabled={this.props.isDisabled}
                        value={this.state.value}
                        placeholder={this.props.placeholder}
                        readOnly={this.props.isReadonly}
                        rows={this.props.rows}
                        style={this.props.style}
                    />
                    <div className="TextareaBlock__helpers">
                        <TextMaxLength
                            maxLength={this.props.maxLength}
                            value={this.state.value}
                        />
                        <ErrorLabel errors={this.state.errors} />
                    </div>
                </div>
            </div>
        );
    }
}

Textarea.propTypes = {
    onChange: PropTypes.func,
    onBlur: PropTypes.func,
    className: PropTypes.string,
    elementId: PropTypes.string.isRequired,
    errors: PropTypes.array,
    maxLength: PropTypes.number,
    value: PropTypes.string,
    placeholder: PropTypes.string,
    label: PropTypes.string,
    name: PropTypes.string.isRequired,
    isDisabled: PropTypes.bool,
    isRequired: PropTypes.bool,
    isReadonly: PropTypes.bool,
    rows: PropTypes.number,
    style: PropTypes.object,
};

Textarea.defaultProps = {
    onChange: () => null,
    onBlur: () => null,
    className: '',
    errors: [],
    label: '',
    value: '',
    placeholder: '',
    maxLength: 0,
    isDisabled: false,
    isRequired: false,
    isReadonly: false,
    rows: 5,
    style: {},
};

export default Textarea;