import { Box, Button, HoverCard } from '@tidbcloud/uikit'
import { useDisclosure } from '@tidbcloud/uikit/hooks'
import { sha256 } from 'js-sha256'
import { observer } from 'mobx-react'

import { SharedCluster } from 'dbaas/features/ClusterManagement/cluster'
import { ClusterOperations } from 'dbaas/screens/Cluster/Operations'
import { DedicatedConnectionModalV2 } from 'dbaas/screens/ClusterV2/features/Connection/dedicated'
import useStores from 'dbaas/stores/useStores'
import { GA4_PAGE_CATEGORY, PRODUCT_TYPES, reportGA } from 'dbaas/utils/tracking'

interface DedicatedToolbarProps {
  cluster: SharedCluster
}

export const DedicatedToolbar = observer(({ cluster }: DedicatedToolbarProps) => {
  const {
    store: { userProfile }
  } = useStores()

  const computed = cluster?.computed
  const disabled =
    computed?.creating || computed?.recovering || computed?.pausing || computed?.paused || computed?.resuming

  const [connectOpened, connectHandlers] = useDisclosure(false)

  return (
    <>
      <HoverCard shadow="md" withArrow disabled={!disabled}>
        <HoverCard.Target>
          <Box component="span" mr={8}>
            <Button
              disabled={disabled}
              onClick={() => {
                connectHandlers.open()
                reportGA({
                  event: 'connect_button_click',
                  page_category: GA4_PAGE_CATEGORY.CLUSTER_OVERVIEW,
                  product_type: PRODUCT_TYPES.DEDICATED,
                  user_id: sha256(userProfile.email)
                })
              }}
              h={32}
              data-mp-event="Connect Button Clicked"
              data-testid="dedicated-connect-v2-btn"
            >
              Connect
            </Button>
          </Box>
        </HoverCard.Target>
        <HoverCard.Dropdown>The function is unavailable in a {cluster.state.toLowerCase()} state.</HoverCard.Dropdown>
      </HoverCard>
      <ClusterOperations from="overview" position="bottom-end" cluster={cluster} />
      <DedicatedConnectionModalV2 cluster={cluster} opened={connectOpened} onClose={connectHandlers.close} />
    </>
  )
})