import { Box, Button, Group, HoverCard } from '@tidbcloud/uikit'

import { getTidbStateToPassivePhrase } from 'dbaas/screens/NextGen/shared/model/tidb-state'
import { useSharedTiDBContext } from 'dbaas/screens/NextGen/tidb-mgmt-container/shared/tidb-context'
import { Commonv1beta1ServicePlan } from 'dbaas/services/api-clients/v2025/tidb-management/v1beta2/interface'
import { MixpanelEvents } from 'dbaas/utils/tracking'

import { PremiumOverviewOperation } from './OverviewOperation'

interface PremiumOverviewHeaderRightSectionProps {
  openConnect: () => void
}

export const PremiumOverviewHeaderRightSection = ({ openConnect }: PremiumOverviewHeaderRightSectionProps) => {
  const tidb = useSharedTiDBContext()
  const connectDisabled = !tidb?.computed.ready
  const passivePhrase = getTidbStateToPassivePhrase(tidb?.state)

  return (
    <Group wrap="nowrap">
      {!tidb.computed.isCassandra && (
        <HoverCard shadow="md" withArrow disabled={!connectDisabled}>
          <HoverCard.Target>
            <Box component="span">
              <Button
                size="sm"
                disabled={connectDisabled}
                onClick={openConnect}
                data-mp-event={MixpanelEvents.TidbConnect.View.EnterClicked}
                data-mp-service-plan={Commonv1beta1ServicePlan.Premium}
                data-testid="premium-connect-button"
              >
                Connect
              </Button>
            </Box>
          </HoverCard.Target>
          <HoverCard.Dropdown>Connection is unavailable while the instance is {passivePhrase}.</HoverCard.Dropdown>
        </HoverCard>
      )}
      <PremiumOverviewOperation />
    </Group>
  )
}