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

import config from 'config'
import { SharedCluster } from 'dbaas/features/ClusterManagement/cluster'
import { ClusterPageShell } from 'dbaas/screens/ClusterV2/components'
import { useGetExpWhiteList } from 'dbaas/services'
import { Commonv1beta1ClusterState } from 'dbaas/services/api-clients/v2023/cluster-management/v1beta1/interface'
import { ExpFeatHashmap } from 'dbaas/stores/localStorage'
import useStores from 'dbaas/stores/useStores'
import { isWebSqlShellHidden } from 'dbaas/utils/feature-flags'

import { DedicatedConnectionModalV2 } from '../../Connection/dedicated'

import { Networking } from './Networking'

const Network = observer(({ cluster }: { cluster: SharedCluster }) => {
  const {
    store: {
      lastVisitLocation: { orgId }
    }
  } = useStores()

  const arch2024Enabled = true
  const nodeGroupExpQuery = useGetExpWhiteList(orgId, undefined, {
    query: {
      enabled: !!orgId && arch2024Enabled,
      select: (data) => data?.exp_names?.includes(ExpFeatHashmap.DedicatedArch2024Exp),
      refetchOnWindowFocus: false,
      refetchOnMount: false
    }
  })

  const [connectOpened, connectHandlers] = useDisclosure()

  const {
    store: { tenantData }
  } = useStores()

  const disabled = Array.of<Commonv1beta1ClusterState>(
    Commonv1beta1ClusterState.CREATING,
    Commonv1beta1ClusterState.RESTORING,
    Commonv1beta1ClusterState.PAUSING,
    Commonv1beta1ClusterState.PAUSED,
    Commonv1beta1ClusterState.RESUMING
  ).includes(cluster.state)

  const webSqlShellHidden = isWebSqlShellHidden(tenantData.id)

  return (
    <ClusterPageShell
      wrapperProps={{
        display: 'flex',
        h: '100%',
        sx: {
          flexDirection: 'column'
        }
      }}
      bodyProps={{
        sx: { flex: 1, minHeight: 0 }
      }}
      headerProps={{
        rightSection: (
          <Group>
            <HoverCard disabled={!disabled}>
              <HoverCard.Target>
                <span>
                  <Button
                    disabled={disabled || nodeGroupExpQuery.isLoading}
                    onClick={connectHandlers.open}
                    size="sm"
                    data-mp-event="Connect Button Clicked"
                    data-mp-source="Networking"
                    data-testid="dedicated-networking-connect"
                  >
                    Connect
                  </Button>
                </span>
              </HoverCard.Target>
              <HoverCard.Dropdown>
                The function is unavailable in a {cluster.state.toLocaleLowerCase()} state
              </HoverCard.Dropdown>
            </HoverCard>
            {!webSqlShellHidden && (
              <HoverCard disabled={!disabled}>
                <HoverCard.Target>
                  <span>
                    <Button
                      disabled={disabled || nodeGroupExpQuery.isLoading}
                      variant="default"
                      onClick={() => {
                        window.open(
                          `/console/web-terminal.html?orgId=${tenantData.id}&clusterId=${
                            cluster.id
                          }&serviceUrl=${encodeURIComponent(config.SERVICE_URL)}`
                        )
                      }}
                      size="sm"
                      data-mp-event="Web Sql Shell Clicked"
                      data-mp-source="Networking"
                    >
                      Web SQL Shell
                    </Button>
                  </span>
                </HoverCard.Target>
                <HoverCard.Dropdown>
                  The function is unavailable in a {cluster.state.toLocaleLowerCase()} state
                </HoverCard.Dropdown>
              </HoverCard>
            )}
          </Group>
        )
      }}
      title="Networking"
    >
      <DedicatedConnectionModalV2 cluster={cluster} opened={connectOpened} onClose={connectHandlers.close} />
      <Networking cluster={cluster} />
    </ClusterPageShell>
  )
})

export default Network