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

import { useDebounceFn } from 'utils/hooks'

import './index.less'

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

function ListToolBar({
  className,
  title,
  actions,
  trailingActions,
  reload,
  noMgb
}: ToolBarProps) {
  const debouncedReload = useDebounceFn(
    reload || (() => Promise.resolve()),
    [],
    200
  )

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

  return (
    <div
      className={clsx(
        'list-toolbar-container',
        noMgb ? '' : 'mgb-md',
        title ? 'space-between' : 'flex-end',
        className
      )}
    >
      {title && <h3>{title}</h3>}

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

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

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

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