import React from 'react';
import DropDown from 'antd/lib/dropdown';
import Menu from 'antd/lib/menu';

interface ContextMenuItem {
  id: number
  title: string
  icon?: string
}

interface IControlledContextMenuProps {
  menuItems: ContextMenuItem[]
  children: JSX.Element
  onItemClick: (index: number) => void
  visible: boolean
  onVisibleChange: (visible: boolean) => void
}

interface IContextMenuProps {
  menuItems: ContextMenuItem[]
  children: JSX.Element
  onItemClick: (index: number) => void
}

export const ControlledContextMenu: React.FC<IControlledContextMenuProps> = (props) => {
  const { menuItems, visible, children, onVisibleChange } = props
  const menu = <Menu>
    {
      menuItems.map((item, index) => (
        <Menu.Item key={index} onClick={e => props.onItemClick(item.id)}  >
          <span className={item.icon} style={{ marginRight: '10px' }} />
          {item.title}
        </Menu.Item>
      ))
    }
  </Menu>

  return (
    <DropDown
      overlay={menu}
      trigger={["contextMenu"]}
      visible={visible}
      onVisibleChange={onVisibleChange}
      overlayStyle={{ display: visible ? 'block' : 'none' }}
    >
      {children}
    </DropDown>
  )
}

export const ContextMenu: React.FC<IContextMenuProps> = (props) => {
  const { menuItems, children } = props
  const menu = <Menu>
    {
      menuItems.map((item, index) => (
        <Menu.Item key={index} onClick={e => props.onItemClick(item.id)}  >
          <span className={item.icon} style={{ marginRight: '10px' }} />
          {item.title}
        </Menu.Item>
      ))
    }
  </Menu>

  return (
    <DropDown
      overlay={menu}
      trigger={["contextMenu"]}
    >
      {children}
    </DropDown>
  )
}