import React from 'react'
import PropTypes from 'prop-types'
import DropMenuBase from 'react-uikit/drop-menu'
import Menu from './partials/menu'
import styles from './styles.scss'
import BEMModule from 'utils/bem'

const bem = new BEMModule(styles)

const DropMenu = ({
    className,
    menuItems,
    menuClassName,
    renderToggle: Toggle,
}) => {
    const classes = bem.classNames('c-drop-menu', className)
    const menuWrapperClasses = bem.classNames(
        'c-drop-menu__menu-wrapper',
        menuClassName
    )

    return (
        <DropMenuBase
            className={classes}
            menuClassName={menuWrapperClasses}
            menuItems={menuItems}
            renderMenu={Menu}
            renderToggle={Toggle}
        />
    )
}

DropMenu.propTypes = {
    className: PropTypes.string,
    menu: PropTypes.func,
    menuClassName: PropTypes.string,
    menuItems: PropTypes.array,
    renderToggle: PropTypes.func,
}

export default React.memo(DropMenu)