import { Alert, Box, Button, Skeleton, Stack, Typography } from '@tidbcloud/uikit'
import { Link } from 'react-router-dom'

import { AccessGuard } from 'dbaas/contexts/access-control'
import { CloudProvider, CloudProviderConst, CloudProviderLabelConst } from 'dbaas/features/Project'
import { CentralAwsVpcPeering, CentralGcpVpcPeering } from 'dbaas/services/api-clients/legacy/central/interface'

import { docLinks } from '../helpers'

interface VpcPeerInfoBlockProps {
  clusterId: string
  provider: CloudProvider
  supported?: boolean
  loading?: boolean
  rawData: {
    [CloudProviderConst.AWS]: CentralAwsVpcPeering[] | undefined
    [CloudProviderConst.GCP]: CentralGcpVpcPeering[] | undefined
  }
  onCancel: () => void
  onInit: () => void
}

export const VpcPeerInfoBlock = ({
  clusterId,
  provider,
  supported = true,
  loading,
  rawData: { aws: awsRawData, gcp: gcpRawData },
  onCancel,
  onInit
}: VpcPeerInfoBlockProps) => {
  if (!supported) {
    return (
      <Box p="xl" pt={0}>
        <Typography variant="body-lg">
          Your cluster doesn't support {CloudProviderLabelConst[provider]} VPC peering. Please contact support for help.
        </Typography>
      </Box>
    )
  }

  if (loading) {
    return (
      <Stack gap={8} p="xl" pt={0}>
        <Skeleton height={20} radius="sm" />
        <Skeleton height={20} radius="sm" />
        <Skeleton height={20} radius="sm" />
      </Stack>
    )
  }
  const awsActiveData = awsRawData?.filter((el) => el.status === 'active')
  const awsState = {
    active: !!awsActiveData?.length,
    pending: !!awsRawData?.length && !awsActiveData?.length,
    none: !awsRawData?.length
  }

  const gcpActiveData = gcpRawData?.filter((el) => el.status === 'active')
  const gcpState = {
    active: !!gcpActiveData?.length,
    pending: !!gcpRawData?.length && !gcpActiveData?.length,
    none: !gcpRawData?.length
  }

  const state = {
    [CloudProviderConst.AWS]: awsState,
    [CloudProviderConst.GCP]: gcpState,
    [CloudProviderConst.AZURE]: null
  }[provider]

  return (
    <Stack p="xl" pt={0} align="flex-start">
      {state?.none && (
        <>
          <Typography variant="body-lg">
            To ensure a secure connection, you need to create a VPC peering before your first connection to the cluster.
            Learn more about{' '}
            <a href={docLinks.peering[provider]} target="_blank" rel="noreferrer">
              setting up VPC peering
            </a>
            .
          </Typography>
          <AccessGuard
            id="ProjectNetworkAction"
            fallback={<Alert>Please ask your admin to create a VPC peering.</Alert>}
          >
            <Button
              variant="default"
              onClick={onInit}
              bg="carbon.2"
              data-mp-event="Create VPC Peering button clicked"
              data-mp-source="connection-modal"
            >
              Create VPC Peering
            </Button>
          </AccessGuard>
        </>
      )}
      {state?.pending && (
        <>
          <Typography variant="body-lg">
            To ensure a secure connection, you need to create a VPC peering before your first connection to the cluster.
            Learn more about{' '}
            <a href={docLinks.peering[provider]} target="_blank" rel="noreferrer">
              setting up VPC peering
            </a>
            .
          </Typography>
          <Alert>
            Your VPC peering is in the System Checking status. Please wait for minutes or visit the{' '}
            <Link to={`/clusters/${clusterId}/networking`} onClick={onCancel}>
              Networking
            </Link>{' '}
            page to reconfigure it.
          </Alert>
        </>
      )}
      {provider === 'aws' && awsState.active && (
        <>
          <Typography variant="body-lg">
            Only active VPC peerings are displayed here. You can visit the{' '}
            <Link to={`/clusters/${clusterId}/networking`} onClick={onCancel}>
              Networking
            </Link>{' '}
            page to add more.
          </Typography>
          <Typography variant="body-lg" lineClamp={1} color="carbon.7">
            Peering connections: {awsActiveData?.map((el) => el.tenant_vpc_id)?.join(', ')}
          </Typography>
        </>
      )}
      {provider === 'gcp' && gcpState.active && (
        <>
          <Typography variant="body-lg">
            Only active VPC peerings are displayed here. You can visit the{' '}
            <Link to={`/clusters/${clusterId}/networking`} onClick={onCancel}>
              Networking
            </Link>{' '}
            page to add more.
          </Typography>
          <Typography variant="body-lg" lineClamp={1} color="carbon.7">
            Google Cloud Network Names: {gcpActiveData?.map((el) => el.tenant_network_name)?.join(', ')}
          </Typography>
        </>
      )}
    </Stack>
  )
}