import { Menu } from '@tidbcloud/uikit'
import { pickBy } from 'lodash-es'
import { observer } from 'mobx-react'
import { Link } from 'react-router-dom'

import { useRequestSupport } from 'dbaas/screens/HelpCenter/RequestSupport/helper'
import { MixpanelEvents } from 'dbaas/utils/tracking/event'

import { OperationMenuControllerBase, OperationType } from './operation-types'

interface StarterOperationMenuProps {
  menuTarget: React.ReactNode
  onMenuOpen?: () => void
  controllers: {
    move: OperationMenuControllerBase & {
      open: () => void
    }
    rename: OperationMenuControllerBase & {
      open: () => void
    }
    deletion: OperationMenuControllerBase & {
      open: () => void
    }
  } & Record<
    Extract<OperationType, 'sqlEditor' | 'importData'>,
    OperationMenuControllerBase & {
      link: string
    }
  >
}

export const StarterOperationMenu = observer(({ menuTarget, controllers, onMenuOpen }: StarterOperationMenuProps) => {
  const { move, rename, sqlEditor, importData, deletion } = controllers
  const moveDataProps = pickBy(move, (_, k) => k.startsWith('data-'))
  const renameDataProps = pickBy(rename, (_, k) => k.startsWith('data-'))
  const sqlEditorDataProps = pickBy(sqlEditor, (_, k) => k.startsWith('data-'))
  const importDataProps = pickBy(importData, (_, k) => k.startsWith('data-'))
  const deletionDataProps = pickBy(deletion, (_, k) => k.startsWith('data-'))
  const { open: openSupport } = useRequestSupport()

  return (
    <Menu withArrow withinPortal position="bottom-end" data-testid="serverless-cluster-operations" onOpen={onMenuOpen}>
      <Menu.Target>{menuTarget}</Menu.Target>
      <Menu.Dropdown>
        {move.rendered !== false && (
          <Menu.Item
            disabled={move.disabled}
            onClick={move.open}
            data-mp-event={MixpanelEvents.TidbResource.Move.EnterClicked}
            {...moveDataProps}
          >
            Move
          </Menu.Item>
        )}
        {rename.rendered !== false && (
          <Menu.Item
            disabled={rename.disabled}
            onClick={rename.open}
            data-mp-event="Rename Button Clicked"
            {...renameDataProps}
          >
            Rename
          </Menu.Item>
        )}
        {sqlEditor.rendered !== false && (
          <Menu.Item
            disabled={sqlEditor.disabled}
            component={Link}
            to={sqlEditor.link}
            data-mp-event="SQL Editor Clicked"
            {...sqlEditorDataProps}
          >
            SQL Editor
          </Menu.Item>
        )}
        {importData.rendered !== false && (
          <Menu.Item
            disabled={importData.disabled}
            component={Link}
            to={importData.link}
            data-mp-event="Import Button Clicked"
            {...importDataProps}
          >
            Import
          </Menu.Item>
        )}
        {deletion.rendered !== false && (
          <Menu.Item
            disabled={deletion.disabled}
            onClick={deletion.open}
            data-mp-event="Open Delete Modal Button Clicked"
            {...deletionDataProps}
          >
            Delete
          </Menu.Item>
        )}
        <Menu.Item onClick={() => openSupport()} data-mp-event="Get Support Button Clicked">
          Get Support
        </Menu.Item>
      </Menu.Dropdown>
    </Menu>
  )
})