import React, { useEffect, useState } from 'react';
import DropDown from 'antd/lib/dropdown';
import Menu from 'antd/lib/menu';
import { CheckOutlined } from '@ant-design/icons';
import { Checkbox } from 'antd';
import { CheckboxChangeEvent } from 'antd/lib/checkbox';

interface ContextMenuItem {
  id: number | string
  title: string
  groupName?: string
  icon?: string
  children?: ContextMenuItem[]
  isCheckbox?: boolean
}

interface IControlledContextMenuProps {
  menuItems: ContextMenuItem[]
  children: JSX.Element
  visible: boolean
  onItemClick: (index: number | string) => void
  onVisibleChange: (visible: boolean) => void
  clearFormat: boolean
  onCheckboxChange?: (e: CheckboxChangeEvent) => void;
}

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

export const ControlledContextMenu: React.FC<IControlledContextMenuProps> = (props) => {

  const { menuItems, visible, children, onVisibleChange, onItemClick, clearFormat, onCheckboxChange } = props

  const [selectedKeys, setSelectedKeys] = useState<string[]>([])

  useEffect(() => {
    if (!visible) {
      setSelectedKeys([])
    }
  }, [visible])

  const menu = (
    <Menu selectable multiple subMenuOpenDelay={0.5} selectedKeys={selectedKeys}>
      {menuItems.map((item, index) => {
        if (item.children) {
          return (
            <Menu.SubMenu onTitleClick={() => onItemClick(item.id)} key={item.id} title={item.title} popupClassName='amisSubMenu'>
              {item.children.map((item, index) => {
                const id = `${index}_${item.id}`
                return (
                  <Menu.Item
                    key={id}
                    onClick={() => { setSelectedKeys(keys => keys.includes(id) ? keys.filter(key => key != id) : keys.concat(id)) }} >
                    <div>
                      {item.groupName ? item.groupName + ' · ' : ''} {item.title}
                    </div>
                    {selectedKeys.some(item => item.includes(id)) && <CheckOutlined style={{ color: '#1890ff' }} />}
                  </Menu.Item>
                )
              })}
              <Menu.Item
                style={{ textAlign: 'center', color: '#1890ff', borderTop: '1px solid #eee' }}
                onClick={() => {
                  const ids = selectedKeys.sort((a, b) => a.localeCompare(b, undefined, { numeric: true })).map(id => {
                    const start = id.indexOf('_') + 1
                    return id.substring(start, id.length)
                  }).join(',')
                  onItemClick(ids)
                }}
              >
                确定复制
              </Menu.Item>
            </Menu.SubMenu>
          )
        }
        if (item.isCheckbox) {
          return <Menu.Item key={index}>
            <Checkbox checked={clearFormat} onChange={onCheckboxChange}>{item.title}</Checkbox>
          </Menu.Item>
        }
        return <Menu.Item key={index} onClick={() => onItemClick(item.id)}>{item.title}</Menu.Item>
      })}
    </Menu>
  )

  return (
    <DropDown
      overlay={menu}
      trigger={["contextMenu"]}
      visible={visible}
      destroyPopupOnHide={true}
      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 as number)}  >
          {item.icon && <span className={item.icon} style={{ marginRight: '10px' }} />}
          {item.title}
        </Menu.Item>
      ))
    }
  </Menu>

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