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

import { PremiumOperationMenu } from 'dbaas/screens/NextGen/premium/shared/operation/OperationMenu'
import { PremiumOperationModals } from 'dbaas/screens/NextGen/premium/shared/operation/OperationModals'
import { usePremiumOperationMenuItemsAccessible } from 'dbaas/screens/NextGen/premium/shared/operation/use-operation-menu-items-accessible'
import { usePremiumOperationMenuItemsEnabled } from 'dbaas/screens/NextGen/premium/shared/operation/use-operation-menu-items-enabled'
import { useSharedTiDBContext } from 'dbaas/screens/NextGen/tidb-mgmt-container/shared/tidb-context'
import { MixpanelEvents } from 'dbaas/utils/tracking/event'

import { usePremiumOverviewOperationModals } from './use-overview-operation-modals'

export const PremiumOverviewOperation = () => {
  const tidb = useSharedTiDBContext()
  const modals = usePremiumOverviewOperationModals(tidb?.tidbId!)
  const menuItemsEnabled = usePremiumOperationMenuItemsEnabled(tidb)
  const menuItemsAccessible = usePremiumOperationMenuItemsAccessible(tidb!)
  const servicePlan = tidb.servicePlan

  return (
    <>
      <PremiumOperationMenu
        servicePlan={servicePlan}
        menuTarget={
          <ActionIcon
            variant="default"
            size={32}
            aria-label="TiDB Premium operation dropdown menu"
            data-mp-event={MixpanelEvents.TidbResource.Operate.EnterClicked}
            data-mp-service-plan={servicePlan}
          >
            <IconDotsHorizontal size={16} />
          </ActionIcon>
        }
        controllers={{
          move: {
            ...modals.move,
            disabled: !menuItemsEnabled.move || !menuItemsAccessible.move
          },
          rename: {
            ...modals.rename,
            disabled: !menuItemsEnabled.rename || !menuItemsAccessible.rename
          },
          password: {
            ...modals.password,
            disabled: !menuItemsEnabled.password || !menuItemsAccessible.password
          },
          deletion: {
            ...modals.deletion,
            disabled: !menuItemsAccessible.deletion
          }
        }}
      />
      <PremiumOperationModals
        tidb={tidb}
        controllers={{
          move: {
            ...modals.move,
            rendered: menuItemsEnabled.move && menuItemsAccessible.move
          },
          rename: {
            ...modals.rename,
            rendered: menuItemsEnabled.rename && menuItemsAccessible.rename
          },
          password: {
            ...modals.password,
            rendered: menuItemsEnabled.password && menuItemsAccessible.password
          },
          deletion: {
            ...modals.deletion,
            rendered: menuItemsAccessible.deletion
          }
        }}
      />
    </>
  )
}