import React from 'react'
import PropTypes from 'prop-types'
import List, {withSelect} from 'react-uikit/list'
import BEMModule from 'utils/bem'
import MenuItem from '../menu-item'
import styles from './styles.scss'

const MenuBase = withSelect(List)
const bem = new BEMModule(styles)

const Menu = ({isOpen, items, toggleMenu}) => {
    const classes = bem.classNames('c-drop-menu__menu')
    const onItemClick = (item) => {
        if (!isOpen) {
            return
        }

        item.onClick && item.onClick()
        toggleMenu()
    }

    return (
        <MenuBase
            className={classes}
            component={MenuItem}
            items={items}
            onItemClick={onItemClick}
        />
    )
}

Menu.propTypes = {
    isOpen: PropTypes.bool,
    items: PropTypes.array,
    toggleMenu: PropTypes.func,
}

export default Menu