import React, {Component} from 'react';
import ErrorLabel from '../ErrorLabel';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import './style.scss';

class Select extends Component {
    constructor(props) {
        super(props);
        const selectValues = [...this.props.selectValues];

        if (props.defaultTitle) {
            selectValues.unshift({
                id: 0,
                title: this.props.defaultTitle,
                disabled: true,
            });
        }

        this.state = {
            value: props.value,
            list: selectValues,
        };

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

    componentDidMount() {
        this.props.selectCallback(this.state.value.id);
    }

    componentWillReceiveProps(nextProps) {
        if (this.props.defaultTitle) {
            const values = [...nextProps.selectValues];

            values.unshift({
                id: 0,
                title: this.props.defaultTitle,
                disabled: true,
            });

            this.setState({list: values});
        }

        if (this.props.value.id !== nextProps.value.id) {
            this.setState({value: nextProps.value});
        }
    }

    handleOnChange(event) {
        this.setState({
            value: event.target.value,
        });
        this.props.selectCallback(event.target.value);
    }

    render() {
        const values = this.state.list.map((value) => {
            return <option key={value.id} value={value.id} disabled={value.disabled}>{value.title}</option>;
        });

        const className = classNames('Select__field', {
            Select__field_danger: this.props.errors.length,
        });

        return (
            <div className="Select">
                <select
                    className={className}
                    id={this.props.id}
                    value={this.state.value.id}
                    onChange={this.handleOnChange}
                >
                    {values}
                </select>
                <div className="Select__helpers">
                    <ErrorLabel errors={this.props.errors} />
                </div>
            </div>
        );
    }
}

Select.propTypes = {
    id: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.number,
    ]).isRequired,
    value: PropTypes.object,
    selectCallback: PropTypes.func.isRequired,
    selectValues: PropTypes.array.isRequired,
    errors: PropTypes.array,
    defaultTitle: PropTypes.string,
};

Select.defaultProps = {
    errors: [],
    defaultTitle: '',
    value: {id: 0},
};

export default Select;