import { Stack, List, Typography } from '@tidbcloud/uikit'

import { CloudProviderConst } from 'dbaas/features/Project'
import { Commonv1beta1ServicePlan } from 'dbaas/services/api-clients/v2023/serverless/v1beta1/interface'

import { Property } from '../shared/components'

interface PrivEndpointDescProps {
  serviceName?: string
  region?: string
  az?: string
  provider?: string
  servicePlan?: Commonv1beta1ServicePlan
}

export const PrivEndpointDesc = ({ serviceName, region, az, provider, servicePlan }: PrivEndpointDescProps) => (
  <Stack data-testid="connection-private-info">
    <Typography variant="body-lg">
      You must set up private endpoint before you first connect to the TiDB database. Learn more about{' '}
      <a
        href={
          provider === CloudProviderConst.ALICLOUD
            ? `https://docs.pingcap.com/tidbcloud/set-up-private-endpoint-connections-on-alibaba-cloud/?plan=${servicePlan?.toLowerCase()}`
            : 'https://docs.pingcap.com/tidbcloud/set-up-private-endpoint-connections-serverless'
        }
        target="_blank"
        rel="noreferrer"
      >
        adding a private endpoint
      </a>
      .
    </Typography>
    <List
      spacing={8}
      size="sm"
      listStyleType="none"
      p="md"
      bg="carbon.1"
      sx={(theme) => ({
        border: `1px solid ${theme.colors.carbon[4]}`,
        borderRadius: theme.defaultRadius
      })}
    >
      <List.Item>
        <Property
          name="Service Name"
          value={serviceName || '<SERVICE_NAME>'}
          isPlaceholder={!serviceName}
          mpEvent="Private endpoint connection property copied"
        />
      </List.Item>
      <List.Item>
        <Property
          name="Availability Zone ID"
          value={az || '<AZ_ID>'}
          isPlaceholder={!az}
          mpEvent="Private endpoint connection property copied"
        />
      </List.Item>
      <List.Item>
        <Property
          name="Region ID"
          value={region || '<REGION_ID>'}
          isPlaceholder={!region}
          mpEvent="Private endpoint connection property copied"
        />
      </List.Item>
    </List>
  </Stack>
)