import React, {Component} from 'react';
import PropTypes from 'prop-types';
import Icon from '../Icon';
import Translate from '../Translate';
import './style.scss';

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

        this.state = {
            icon: props.icon,
            options: props.options,
            title: props.title,
            titleClass: props.titleClass,
            showMenu: props.showMenu,
        };
    }

    toggleMenu() {
        this.setState({
            showMenu: !this.state.showMenu,
        });
    }

    render() {

        return (
            <div className="Dropdown">
                <div
                    className={`Dropdown__title ${this.state.showMenu ? this.state.titleClass : ''}`}
                    onMouseOver={() => this.toggleMenu()}
                    onMouseOut={() => this.toggleMenu()}
                >
                    <Translate tag={this.state.title} /> {this.state.icon ? <Icon name={this.props.icon} color="blue" classNames="Dropdown__icon"/> : ''}
                    <div className={`Dropdown__list ${this.state.showMenu && 'Dropdown__list_open'}`}>
                        {this.state.options.map((item) => {
                            return (
                                <div
                                    key={item.props.children.props.tag}
                                    className="Dropdown__item"
                                >
                                    {item}
                                </div>
                            );
                        })}
                    </div>
                </div>
            </div>
        );
    }
}

Dropdown.propTypes = {
    icon: PropTypes.string,
    options: PropTypes.array.isRequired,
    showMenu: PropTypes.bool,
    title: PropTypes.string.isRequired,
    titleClass: PropTypes.string,
};

Dropdown.defaultProps = {
    icon: 'arrow-down',
    showMenu: false,
    titleClass: 'Dropdown__title_open',
};

export default Dropdown;