import { ReloadOutlined } from '@ant-design/icons'
import { Button, Menu } from 'antd'
import clsx from 'clsx'
import React from 'react'

import { useDebounceFn } from 'utils/hooks'

import './index.less'

interface ToolBarProps {
  className?: string
  menuItems?: (string | React.ReactNode)[]
  actions?: React.ReactNode[]
  reload: () => Promise<void>
  noMgb?: boolean
}

function MenuToolBar({
  className,
  menuItems,
  actions,
  reload,
  noMgb
}: ToolBarProps) {
  const debouncedReload = useDebounceFn(reload, [], 200)

  const handleReload = () => debouncedReload.run()

  return (
    <div
      className={clsx(
        'list-toolbar-container',
        noMgb ? '' : 'mgb-md',
        menuItems ? 'space-between' : 'flex-end',
        className
      )}
    >
      {menuItems && (
        <Menu
          mode="horizontal"
          style={{
            flex: 'auto',
            minWidth: 0,
            borderBottomColor: 'rgb(0,0,0,0)'
          }}
        >
          {menuItems.map((item) => (
            <Menu.Item>{item}</Menu.Item>
          ))}
        </Menu>
      )}

      <div className="actions">
        {actions?.map((action, index) => {
          return (
            <div key={index} className="action">
              {action}
            </div>
          )
        })}

        <div className="action">
          <Button icon={<ReloadOutlined />} onClick={handleReload}>
            Reload
          </Button>
        </div>
      </div>
    </div>
  )
}

// pure component (stateless component)
export default React.memo(MenuToolBar) as typeof MenuToolBar