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

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

        this.state = {
            open: false,
        };
    }

    render() {
        const styles = classNames('TopMenuItem', {
            TopMenuItem_open: this.state.open,
        });

        const dropDownMenuStyle = this.props.position && `TopMenuItem__dropdown-menu_${this.props.position}`;

        const overlay = this.state.open && (
            <div
                className="TopMenuItem__overlay"
                onClick={() => this.setState({open: !this.state.open})}
            />
        );

        const title = this.props.title && (<span>{this.props.title}</span>);

        const icon = this.props.icon && (
            <Icon
                color={this.props.icon.size}
                name={this.props.icon.name}
                size={this.props.icon.size}
                classNames="TopMenuItem__dropdown-item-icon"
            />
        );

        return (
            <div
                className={styles}
            >
                <button
                    className="TopMenuItem__button"
                    type="button"
                    onClick={() => this.setState({open: !this.state.open})}
                >
                    {icon}
                    {title}
                    {!this.props.icon && (<Icon name="arrow-down" />)}
                </button>

                <div className={`TopMenuItem__dropdown-menu ${dropDownMenuStyle}`}>
                    {this.props.items.map((item) => (
                        <button
                            key={item.title}
                            className="TopMenuItem__dropdown-item"
                            type="button"
                            onClick={() => this.props.onClick(item)}
                        >
                            {item.icon && (
                                <Icon
                                    color={item.icon.size}
                                    name={item.icon.name}
                                    size={item.icon.size}
                                    classNames="TopMenuItem__dropdown-item-icon"
                                />
                            )}
                            <Translate
                                tag={item.title}
                                notranslate={item.notranslate || false}
                            />
                        </button>
                    ))}
                </div>
                {overlay}
            </div>
        );
    }
}

TopMenuItem.propTypes = {
    title: PropTypes.string,
    icon: PropTypes.object,
    items: PropTypes.array.isRequired,
    onClick: PropTypes.func.isRequired,
    position: PropTypes.oneOf(['left', 'right']),
};

TopMenuItem.defaultProps = {
    icon: null,
    title: null,
    position: null,
};

export default TopMenuItem;