import { Alert, List, Loader, Stack } from '@tidbcloud/uikit'
import { IconAlertCircle, IconCheckCircle } from '@tidbcloud/uikit/icons'

import { GetPrivateLinkEndpointRespPhase } from 'dbaas/services/dataflow/interface'

const PrivateLinkMessage = ({
  serviceName,
  phase,
  message,
  endpoint_id,
  isAzureMysql
}: {
  phase?: GetPrivateLinkEndpointRespPhase
  message?: string
  serviceName: string
  endpoint_id?: string
  isAzureMysql?: boolean
}) => {
  if (phase === GetPrivateLinkEndpointRespPhase.Pending) {
    return (
      <Alert icon={<Loader size="xs" />} title="Just one second">
        Still creating private link endpoint for you.
      </Alert>
    )
  }

  if (phase === GetPrivateLinkEndpointRespPhase.Failed) {
    return (
      <Alert color="red" icon={<IconAlertCircle />}>
        {message}
      </Alert>
    )
  }

  if (phase === GetPrivateLinkEndpointRespPhase.Available) {
    return (
      <Alert icon={<IconCheckCircle />} color="green">
        VPC Endpoint created and is ready to use!
      </Alert>
    )
  }

  // phase === GetPrivateLinkEndpointRespPhase.PendingAcceptance
  return (
    <Stack>
      <Alert icon={<IconCheckCircle />} color="green">
        VPC Endpoint created!
      </Alert>

      {isAzureMysql ? (
        <List px={8} py={8}>
          <List.Item>
            Access{' '}
            <a href="https://portal.azure.com/" target="_blank" rel="noreferrer">
              Azure Portal
            </a>{' '}
            and choose one of the two approval paths:
          </List.Item>
          <List.Item>
            Option 1: Azure Database for MySQL Flexible Server → Networking → Private endpoints → select the TiDB Cloud
            connection request → Approve
          </List.Item>
          <List.Item>
            Option 2: Private Link Center → Pending connections → select the TiDB Cloud connection request → Approve.
          </List.Item>
          <List.Item>Return here and continue.</List.Item>
        </List>
      ) : (
        <p>
          Please go to the Amazon VPC Endpoint service console, choose the corresponding Endpoint Service name :{' '}
          <b>{serviceName}</b>, and accept the request of the VPC Endpoint: <b>{endpoint_id}</b>.
        </p>
      )}
    </Stack>
  )
}

export default PrivateLinkMessage