import useUrlState from '@ahooksjs/use-url-state'
import { Alert, Box, Button, Group, Modal, SegmentedControl, Stack } from '@tidbcloud/uikit'
import { useDisclosure } from '@tidbcloud/uikit/hooks'
import { observer } from 'mobx-react'
import { useQueryClient } from 'react-query'
import { Link } from 'react-router-dom'

import { AccessDeniedHoverHint, AccessGuard } from 'dbaas/contexts/access-control'
import { CloudProvider, CloudProviderConst } from 'dbaas/features/Project'
import { OrgPlanStatus } from 'dbaas/screens/Plans/constant'
import { getListPrivateLinkEndpointsQueryKey } from 'dbaas/services'
import { getPrivateEndpointConnectionServiceListPrivateEndpointConnectionsQueryKey } from 'dbaas/services/api-clients/v2023/dedicated/v1beta1'
import { PrivateEndpointConnectionServiceListPrivateEndpointConnectionsCloudProvider } from 'dbaas/services/api-clients/v2023/dedicated/v1beta1/interface'
import useStores from 'dbaas/stores/useStores'

import { AWSEndpointList } from './aws'
import { Creation } from './aws/Creation'
import { AzureEndpointList, AzurePrivateEndpointCreation } from './azure'
import { GCPEndpointList } from './gcp'
import { EndpointCreation } from './gcp/creation'
import { useNodeGroupEnabled } from './helpers'

export const PrivateEndpointHome = observer(() => {
  const {
    store: {
      tenantData: { plan, id: orgId },
      activeProjectId: projectId
    }
  } = useStores()

  const [urlState, setUrlState] = useUrlState({ provider: CloudProviderConst.AWS })

  const [awsCreationShow, awsCreationHandlers] = useDisclosure(false)

  const [gcpCreationShow, gcpCreationHandlers] = useDisclosure(false)

  const [azureCreationShow, azureCreationHandlers] = useDisclosure(false)

  const queryClient = useQueryClient()

  const { nodeGroupEnabled } = useNodeGroupEnabled()

  const providers: { label: string; value: CloudProvider }[] = [
    { label: 'AWS', value: CloudProviderConst.AWS },
    { label: 'Google Cloud', value: CloudProviderConst.GCP },
    { label: 'Azure', value: CloudProviderConst.AZURE }
  ]

  return (
    <Stack justify="flex-start">
      {plan !== OrgPlanStatus.ON_DEMAND && (
        <Alert>
          <strong>Tips: </strong>To have a private endpoint connection for your cluster, you need to{' '}
          <AccessGuard id="ClusterCreationGate" fallback="create a Dedicated cluster">
            <Link
              to="/clusters/create-cluster?tier=dedicated"
              data-mp-event="Create a Dedicated Tier Cluster Link Clicked"
            >
              create a Dedicated cluster
            </Link>
          </AccessGuard>{' '}
          first.
        </Alert>
      )}

      <Group justify="space-between">
        <SegmentedControl
          value={urlState.provider}
          onChange={(value) => setUrlState({ provider: value })}
          data={providers}
        />
        <AccessDeniedHoverHint id="ProjectNetworkAction">
          {({ accessible }) => (
            <>
              {urlState.provider === CloudProviderConst.AWS && (
                <Button
                  size="sm"
                  disabled={!accessible}
                  data-mp-event="Click AWS Private Endpoint Creation Menu Item"
                  onClick={awsCreationHandlers.open}
                >
                  Create Private Endpoint Connection
                </Button>
              )}
              {urlState.provider === CloudProviderConst.GCP && (
                <Button
                  size="sm"
                  disabled={!accessible}
                  data-mp-event="Click Google Cloud Private Endpoint Creation Menu Item"
                  onClick={gcpCreationHandlers.open}
                >
                  Create Private Endpoint Connection
                </Button>
              )}
              {urlState.provider === CloudProviderConst.AZURE && (
                <Button
                  size="sm"
                  disabled={!accessible}
                  data-mp-event="Click AZURE Endpoint Creation Menu Item"
                  onClick={azureCreationHandlers.open}
                >
                  Create Private Endpoint Connection
                </Button>
              )}
            </>
          )}
        </AccessDeniedHoverHint>
      </Group>
      <Box mx="-xl">
        {urlState.provider === CloudProviderConst.AWS && <AWSEndpointList nodeGroupEnabled={nodeGroupEnabled} />}
        {urlState.provider === CloudProviderConst.GCP && <GCPEndpointList nodeGroupEnabled={nodeGroupEnabled} />}
        {urlState.provider === CloudProviderConst.AZURE && <AzureEndpointList />}
      </Box>
      <Modal
        title="Create AWS Private Endpoint Connection"
        size={730}
        centered
        styles={{ body: { padding: 0 } }}
        closeOnClickOutside={false}
        opened={awsCreationShow}
        onClose={awsCreationHandlers.close}
      >
        <Creation
          onCancel={awsCreationHandlers.close}
          onConfirm={() => {
            awsCreationHandlers.close()
            if (nodeGroupEnabled) {
              queryClient.invalidateQueries(
                getPrivateEndpointConnectionServiceListPrivateEndpointConnectionsQueryKey('-', '-', {
                  orgId,
                  projectId
                })
              )
            } else {
              queryClient.invalidateQueries(getListPrivateLinkEndpointsQueryKey(orgId, projectId))
            }
          }}
        />
      </Modal>
      <Modal
        title="Create Google Cloud Private Endpoint Connection"
        size={730}
        centered
        styles={{ body: { padding: 0 } }}
        closeOnClickOutside={false}
        opened={gcpCreationShow}
        onClose={gcpCreationHandlers.close}
      >
        <EndpointCreation
          onCancel={gcpCreationHandlers.close}
          onConfirm={() => {
            gcpCreationHandlers.close()
            if (nodeGroupEnabled) {
              queryClient.invalidateQueries(
                getPrivateEndpointConnectionServiceListPrivateEndpointConnectionsQueryKey('-', '-', {
                  orgId,
                  projectId
                })
              )
            } else {
              queryClient.invalidateQueries(getListPrivateLinkEndpointsQueryKey(orgId, projectId))
            }
          }}
        />
      </Modal>
      <Modal
        title="Create Azure Private Endpoint Connection"
        size={730}
        centered
        styles={{ body: { padding: 0 } }}
        closeOnClickOutside={false}
        opened={azureCreationShow}
        onClose={azureCreationHandlers.close}
      >
        <AzurePrivateEndpointCreation
          onCancel={azureCreationHandlers.close}
          onConfirm={() => {
            azureCreationHandlers.close()
            queryClient.invalidateQueries(
              getPrivateEndpointConnectionServiceListPrivateEndpointConnectionsQueryKey('-', '-', {
                cloudProvider: PrivateEndpointConnectionServiceListPrivateEndpointConnectionsCloudProvider.azure,
                orgId,
                projectId
              })
            )
          }}
        />
      </Modal>
    </Stack>
  )
})