import { Menu } from '@tidbcloud/uikit'
import { observer } from 'mobx-react'

import { useRequestSupport } from 'dbaas/screens/HelpCenter/RequestSupport/helper'
import { Commonv1beta1ServicePlan } from 'dbaas/services/api-clients/v2025/tidb-management/v1beta2/interface'
import { MixpanelEvents } from 'dbaas/utils/tracking/event'

import { PremiumOperationType } from './operation-types'

interface PremiumOperationMenuProps {
  menuTarget: React.ReactNode
  servicePlan: Commonv1beta1ServicePlan
  onMenuOpen?: () => void
  controllers: Record<
    PremiumOperationType,
    {
      /**
       * Default to true, if false, the menu item will not be rendered
       */
      rendered?: boolean
      /**
       * Default to false, if true, the menu item will be disabled
       */
      disabled?: boolean
      open: () => void
    }
  >
}

export const PremiumOperationMenu = observer(
  ({ menuTarget, servicePlan, onMenuOpen, controllers }: PremiumOperationMenuProps) => {
    const { move, rename, password, deletion } = controllers
    const { open: openSupport } = useRequestSupport()

    return (
      <Menu withArrow withinPortal position="bottom-end" data-testid="premium-operation-menu" 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}
              data-mp-service-plan={servicePlan}
            >
              Move
            </Menu.Item>
          )}
          {rename.rendered !== false && (
            <Menu.Item
              disabled={rename.disabled}
              onClick={rename.open}
              data-mp-event={MixpanelEvents.TidbDisplayName.Update.EnterClicked}
              data-mp-service-plan={servicePlan}
            >
              Rename
            </Menu.Item>
          )}
          {password.rendered !== false && (
            <Menu.Item
              disabled={password.disabled}
              onClick={password.open}
              data-mp-event={MixpanelEvents.TidbRootPassword.Update.EnterClicked}
              data-mp-service-plan={servicePlan}
            >
              Change Root Password
            </Menu.Item>
          )}
          {deletion.rendered !== false && (
            <Menu.Item
              disabled={deletion.disabled}
              onClick={deletion.open}
              data-mp-event={MixpanelEvents.TidbResource.Delete.EnterClicked}
              data-mp-service-plan={servicePlan}
            >
              Delete
            </Menu.Item>
          )}
          <Menu.Item onClick={() => openSupport()} data-mp-event={MixpanelEvents.SupportTicket.Create.EnterClicked}>
            Get Support
          </Menu.Item>
        </Menu.Dropdown>
      </Menu>
    )
  }
)