import { Button, Menu } from '@tidbcloud/uikit'
import { IconChevronDown } from '@tidbcloud/uikit/icons'
import { observer } from 'mobx-react'
import { useHistory } from 'react-router-dom'

import { AccessDeniedHoverHint } from 'dbaas/contexts/access-control'
import { SharedCluster } from 'dbaas/features/ClusterManagement/cluster'
import { ExportTargets } from 'dbaas/features/Import'
import { ExportTargetTypeEnum as ServerlessExportTargetTypeEnum } from 'dbaas/services/api-clients/legacy/serverless/interface'

export const ExportPageHeader = observer(({ cluster }: { cluster: SharedCluster }) => {
  const history = useHistory()

  const handleGotoExport = (target: ServerlessExportTargetTypeEnum) => {
    history.push(`/clusters/${cluster.id}/exports/create-export?target=${target}`)
  }

  if (cluster.computed.isServerless) {
    return (
      <AccessDeniedHoverHint id="TidbxExportAction">
        {({ accessible }) => (
          <Menu withArrow>
            <Menu.Target>
              <Button
                h={32}
                rightSection={<IconChevronDown size={12} />}
                disabled={!accessible}
                data-mp-event="Export Data to Clicked"
                data-testid="export-create-trigger"
              >
                Export Data to...{' '}
              </Button>
            </Menu.Target>
            <Menu.Dropdown miw={160}>
              {ExportTargets.map((target) => (
                <Menu.Item
                  key={target.value}
                  disabled={!accessible}
                  onClick={() => handleGotoExport(target.value)}
                  data-mp-event="Export Data to Target Clicked"
                  data-mp-target={target.value}
                  data-testid={`export-create-target-${target.key}`}
                >
                  {target.label}
                </Menu.Item>
              ))}
            </Menu.Dropdown>
          </Menu>
        )}
      </AccessDeniedHoverHint>
    )
  }

  return null
})