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

import { AccessGuard } from 'dbaas/contexts/access-control'
import { CloudProviderLabelConst } from 'dbaas/features/Project'
import { MixpanelEvents } from 'dbaas/utils/tracking'

import { docLinks } from '../helpers'

interface PrivateInfoBlockProps {
  tidbId: string
  cloudProvider: string
  supported?: boolean
  loading?: boolean
  fullData: Record<'id' | 'name', string>[] | undefined
  activeData: Record<'id' | 'name', string>[] | undefined
  endpointId: string | undefined
  docLinks?: Record<string, string>
  onEndpointChange: (id: string) => void
  onCancel: () => void
  onInit: () => void
}

export const PrivateInfoBlock = ({
  tidbId,
  cloudProvider,
  supported = true,
  loading,
  fullData,
  activeData,
  endpointId,
  docLinks: customDocLinks,
  onEndpointChange,
  onCancel,
  onInit
}: PrivateInfoBlockProps) => {
  const active = !!activeData?.length
  const pending = !!fullData?.length && !activeData?.length
  const none = !fullData?.length
  const options =
    activeData?.map((el) => ({
      value: el.id,
      label: el.name
    })) || []
  const privateEndpointDocLink = customDocLinks?.[cloudProvider] ?? docLinks.private[cloudProvider]

  if (!supported) {
    return (
      <Box p="xl" pt={0}>
        <Typography variant="body-lg">
          Your instance doesn't support {CloudProviderLabelConst[cloudProvider]} private endpoint. 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>
    )
  }

  return (
    <Stack p="xl" pt={0}>
      {none && (
        <>
          <Typography variant="body-lg">
            To ensure a secure connection, you need to create a private endpoint connection before your first connection
            to your instance. Learn more about{' '}
            <a href={privateEndpointDocLink} target="_blank" rel="noreferrer">
              setting up a private endpoint
            </a>
            .
          </Typography>
          <AccessGuard
            id="TidbxNetworkingUpdate"
            fallback={<Alert>Please ask your admin to create a private endpoint connection.</Alert>}
          >
            <Button
              variant="default"
              onClick={onInit}
              sx={{ alignSelf: 'flex-start' }}
              data-mp-event={MixpanelEvents.PremiumPrivateEndpoint.Create.ButtonClicked}
              data-mp-source="premium-connect-modal"
            >
              Create Private Endpoint Connection
            </Button>
          </AccessGuard>
        </>
      )}
      {pending && (
        <>
          <Typography variant="body-lg">
            To ensure a secure connection, you need to create a private endpoint connection before your first connection
            to your instance. Learn more about{' '}
            <a href={privateEndpointDocLink} target="_blank" rel="noreferrer">
              setting up a private endpoint
            </a>
            .
          </Typography>
          <Alert>
            Your private endpoint Connection is in the System Checking status. Please wait for minutes or visit the{' '}
            <Link to={`/tidbs/${tidbId}/networking`} onClick={onCancel}>
              Networking
            </Link>{' '}
            page to reconfigure it.
          </Alert>
        </>
      )}
      {active && (
        <>
          <Select
            label="Endpoint ID"
            disabled={options?.length <= 1}
            data={options}
            value={endpointId}
            onChange={onEndpointChange}
            w="100%"
            mt="-8px"
          />
          <Typography variant="body-lg">
            Only active endpoints are displayed here. You can visit the{' '}
            <Link to={`/tidbs/${tidbId}/networking`} onClick={onCancel}>
              Networking
            </Link>{' '}
            page to add more.
          </Typography>
        </>
      )}
    </Stack>
  )
}