import { ActionIcon, ActionIconProps } from '@tidbcloud/uikit'
import { IconDotsHorizontal } from '@tidbcloud/uikit/icons'

import { getServerlessServicePlan, SharedCluster } from 'dbaas/features/ClusterManagement/cluster'
import { StarterOperationMenu } from 'dbaas/screens/ClusterV2/features/Operations/starter/shared/OperationMenu'
import { StarterOperationModals } from 'dbaas/screens/ClusterV2/features/Operations/starter/shared/OperationModals'
import { useStarterOperationMenuItemStatus } from 'dbaas/screens/ClusterV2/features/Operations/starter/shared/use-operation-menu-item-status'
import { useStarterOperationMenuItemsAccessible } from 'dbaas/screens/ClusterV2/features/Operations/starter/shared/use-operation-menu-items-accessible'
import { MixpanelEvents } from 'dbaas/utils/tracking/event'

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

interface StarterOperationProps {
  cluster: Required<SharedCluster>['serverless'] | undefined
  modals: Record<Extract<OperationType, 'move' | 'rename' | 'deletion'>, OperationModalController>
  actionIconProps?: ActionIconProps
  onMenuOpen?: () => void
}

export const StarterOperation = ({ cluster, modals, actionIconProps, onMenuOpen }: StarterOperationProps) => {
  const clusterId = cluster?.clusterId!
  const menuItemStatus = useStarterOperationMenuItemStatus(cluster)
  const menuItemAccessible = useStarterOperationMenuItemsAccessible(cluster)
  const servicePlan = cluster?.servicePlan ? getServerlessServicePlan(cluster) : ''

  return (
    <>
      <StarterOperationMenu
        onMenuOpen={onMenuOpen}
        menuTarget={
          <ActionIcon
            variant="subtle"
            size={32}
            disabled={!cluster}
            {...actionIconProps}
            aria-label="Cluster operation dropdown menu"
            data-mp-event={MixpanelEvents.TidbResource.Operate.EnterClicked}
            data-mp-service-plan={servicePlan}
          >
            <IconDotsHorizontal size={16} />
          </ActionIcon>
        }
        controllers={{
          move: {
            ...modals.move,
            disabled: menuItemStatus.move.disabled || !menuItemAccessible.move,
            'data-mp-service-plan': servicePlan
          },
          rename: {
            ...modals.rename,
            disabled: menuItemStatus.rename.disabled || !menuItemAccessible.rename,
            'data-mp-service-plan': servicePlan
          },
          sqlEditor: {
            rendered: menuItemStatus.sqlEditor.rendered,
            disabled: menuItemStatus.sqlEditor.disabled || !menuItemAccessible.sqlEditor,
            link: `/clusters/${clusterId}/sqleditor`,
            'data-mp-service-plan': servicePlan
          },
          importData: {
            rendered: menuItemStatus.importData.rendered,
            disabled: menuItemStatus.importData.disabled || !menuItemAccessible.importData,
            link: `/clusters/${clusterId}/imports/create-import?from=local`,
            'data-mp-service-plan': servicePlan
          },
          deletion: {
            ...modals.deletion,
            disabled: menuItemStatus.deletion.disabled || !menuItemAccessible.deletion
          }
        }}
      />
      <StarterOperationModals
        cluster={cluster}
        controllers={{
          move: {
            ...modals.move,
            rendered: !menuItemStatus.move.disabled
          },
          rename: {
            ...modals.rename,
            rendered: !menuItemStatus.rename.disabled
          },
          deletion: {
            ...modals.deletion,
            rendered: !menuItemStatus.deletion.disabled
          }
        }}
      />
    </>
  )
}