import { DownOutlined } from '@ant-design/icons'
import React, { FC, useState } from 'react'
import { getClassnames } from '../../utils'

import './style.less'

/**
 * 不使用 antd 的 dropdown，因为里面会用 tooltip，体积过大
 */
export const ApprowDropdown: FC<{
  className?: string
  menus: {
    label: React.ReactNode
    key: string | number
    onClick?: (
      key: string | number,
      evt: React.MouseEvent<HTMLDivElement, MouseEvent>
    ) => void
  }[]
}> = ({ menus, children, className }) => {
  const [visible, setVisible] = useState(false)

  return (
    <div
      className={getClassnames(['approw-dropdown', className])}
      onMouseEnter={() => setVisible(true)}
      onMouseLeave={() => setVisible(false)}
    >
      <div className="approw-dropdown-trigger">{children}</div>
      <div
        className={getClassnames([
          'approw-dropdown-menu-container',
          visible && 'approw-dropdown-menu-container__visible',
        ])}
      >
        {menus.map((item) => (
          <div
            className="approw-dropdown-menu-item"
            onClick={(evt) => {
              setVisible(false)
              item.onClick?.(item.key, evt)
            }}
            key={item.key}
          >
            {item.label}
          </div>
        ))}
      </div>
      <DownOutlined className="approw-dropdown-icon" />
    </div>
  )
}