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

import { AccessGuard } from 'dbaas/contexts/access-control'

import { docLinks } from '../helpers'

const ANYWHERE_CIDR = '0.0.0.0/0'

interface PublicInfoBlockProps {
  enabled?: boolean
  clusterId: string
  provider: string
  loading?: boolean
  ipList: string[] | undefined
  onCancel: () => void
  onInit: () => void
}

export const PublicInfoBlock = ({
  enabled = true,
  clusterId,
  provider,
  loading,
  ipList,
  onCancel,
  onInit
}: PublicInfoBlockProps) => {
  const none = !ipList?.length
  const anywhere = !!ipList?.includes(ANYWHERE_CIDR)

  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>
    )
  }

  if (!enabled) {
    return (
      <Box p="xl" pt={0}>
        <Alert color="yellow">
          For security reason, the public connection is disabled. You can visit the{' '}
          <Link to={`/clusters/${clusterId}/networking`} onClick={onCancel}>
            Networking
          </Link>{' '}
          page to enable it.
        </Alert>
      </Box>
    )
  }
  return (
    <Stack p="xl" pt={0} align="flex-start">
      {none && (
        <>
          <Typography variant="body-lg">
            To ensure a secure connection, you need to configure an IP access list to filter internet traffics before
            your first connection to the cluster. Learn more about the{' '}
            <a href={docLinks.public[provider]} target="_blank" rel="noreferrer">
              configuring an IP access list
            </a>
            .
          </Typography>
          <AccessGuard
            id="ProjectNetworkAction"
            fallback={<Alert>Please ask your admin to configure an IP access list.</Alert>}
          >
            <Button
              variant="default"
              bg="carbon.2"
              data-mp-event="Configure IP Access List button clicked"
              data-mp-source="connection-modal"
              onClick={onInit}
            >
              Configure IP Access List
            </Button>
          </AccessGuard>
        </>
      )}
      {!none && anywhere && (
        <Alert color="yellow">
          You allow any IP address to access your cluster now. It's not recommended as this would expose your cluster to
          the internet completely. You can visit the{' '}
          <Link to={`/clusters/${clusterId}/networking`} onClick={onCancel}>
            Networking
          </Link>{' '}
          page to configure the IP access list.
        </Alert>
      )}
      {!none && !anywhere && (
        <>
          <Typography variant="body-lg">
            Only IP addresses in your IP access list can connect to your cluster. You can visit the{' '}
            <Link to={`/clusters/${clusterId}/networking`} onClick={onCancel}>
              Networking
            </Link>{' '}
            page to configure them.
          </Typography>
          <Typography variant="body-lg" lineClamp={1} color="carbon.7">
            IP addresses: {ipList?.join(', ')}
          </Typography>
        </>
      )}
    </Stack>
  )
}