import { Button, Stack, Alert, Paper, Box } from '@tidbcloud/uikit'

import { PropertyKV } from 'dbaas/components'
import { DetailsDrawer, TwoColsPropRow } from 'dbaas/features/Project'
import {
  Dedicatedv1beta1VpcPeering,
  Dedicatedv1beta1VpcPeeringState
} from 'dbaas/services/api-clients/v2023/dedicated/v1beta1/interface'

import { Status } from './Status'

interface VPCPeeringDetailsProps {
  opened: boolean
  onClose: () => void
  onDelete: (id: string) => void
  data?: Dedicatedv1beta1VpcPeering
}

export const VPCPeeringDetails = ({ opened, onClose, onDelete, data }: VPCPeeringDetailsProps) => {
  if (!data) {
    return null
  }

  return (
    <DetailsDrawer
      closeButtonProps={{
        'aria-label': 'Close AWS VPC Peering Details'
      }}
      title="AWS VPC Peering Details"
      opened={opened}
      onClose={onClose}
    >
      <DetailsDrawer.Body p="xl">
        <Stack>
          {data.state === Dedicatedv1beta1VpcPeeringState.PENDING && (
            <Alert>
              Your VPC peering has been initialized. Learn{' '}
              <a
                href="https://docs.pingcap.com/tidbcloud/set-up-vpc-peering-connections#set-up-vpc-peering-on-aws"
                target="_blank"
                rel="noreferrer"
              >
                how to set up VPC peering on AWS
              </a>
              .
              <br />
              If your VPC has already peered with other VPCs, make sure all the peered VPCs are not overlapped with{' '}
              <Box component="b" fw={600}>
                {data.tidbCloudVpcCidr}
              </Box>
              .
            </Alert>
          )}
          <PropertyKV label="Provider" labelProps={{ w: 160 }}>
            AWS
          </PropertyKV>
          <PropertyKV label="Peering ID" labelProps={{ w: 160 }}>
            {data.vpcPeeringId || '-'}
          </PropertyKV>
          <PropertyKV label="Peering Connection ID" labelProps={{ w: 160 }}>
            {data.awsVpcPeeringConnectionId || '-'}
          </PropertyKV>
          <PropertyKV label="Status" align="center" labelProps={{ w: 160 }}>
            <Status status={data.state} />
          </PropertyKV>
          <Paper shadow="none" p="xl" bg="carbon.2">
            <TwoColsPropRow
              left={<TwoColsPropRow.Left label="TiDB Cloud VPC Region">{data.tidbCloudRegionId}</TwoColsPropRow.Left>}
              right={<TwoColsPropRow.Right label="Your VPC Region">{data.customerRegionId}</TwoColsPropRow.Right>}
            />
            <TwoColsPropRow
              left={
                <TwoColsPropRow.Left label="TiDB Cloud AWS Account ID">{data.tidbCloudAccountId}</TwoColsPropRow.Left>
              }
              right={<TwoColsPropRow.Right label="Your AWS Account ID">{data.customerAccountId}</TwoColsPropRow.Right>}
            />
            <TwoColsPropRow
              left={<TwoColsPropRow.Left label="TiDB Cloud VPC ID">{data.tidbCloudVpcId}</TwoColsPropRow.Left>}
              right={<TwoColsPropRow.Right label="Your VPC ID">{data.customerVpcId}</TwoColsPropRow.Right>}
            />
            <TwoColsPropRow
              left={<TwoColsPropRow.Left label="TiDB Cloud VPC CIDR">{data.tidbCloudVpcCidr}</TwoColsPropRow.Left>}
              right={<TwoColsPropRow.Right label="Your VPC CIDR">{data.customerVpcCidr}</TwoColsPropRow.Right>}
            />
          </Paper>
        </Stack>
      </DetailsDrawer.Body>
      <DetailsDrawer.Footer>
        <Button
          variant="light"
          color="red"
          onClick={() => onDelete(data.vpcPeeringId || '')}
          data-mp-event="Delete VPC Peering Button Clicked"
          data-mp-provider="aws"
        >
          Delete
        </Button>
      </DetailsDrawer.Footer>
    </DetailsDrawer>
  )
}