import { Box, Card, Group, Loader, Stack, Typography } from '@tidbcloud/uikit'
import { CodeBlock, PropertyCard } from '@tidbcloud/uikit/biz'

import TimeComponent from 'dbaas/components/TimeComponent'
import {
  CopiableProperty,
  getDomainType
} from 'dbaas/screens/ClusterV2/features/Network/dedicated/PrivateEndpointChangefeed/Detail'
import { PrivateEndpointForChangefeedStatus } from 'dbaas/screens/ClusterV2/features/Network/dedicated/PrivateEndpointChangefeed/Status'
import { useSharedTiDBContext } from 'dbaas/screens/NextGen/tidb-mgmt-container/shared/tidb-context'
import { useNgGetSinkEndpoint } from 'dbaas/services/dataflow'
import { ConsoleapiSinkEndpointStatus } from 'dbaas/services/dataflow/interface'

export const PrivateEndpointChangefeedDetail = ({ id }: { id: string }) => {
  const cluster = useSharedTiDBContext()
  const { data: sinkEndpointData, isLoading } = useNgGetSinkEndpoint(cluster.tidbId!, id, {
    query: {
      enabled: !!cluster.tidbId! && !!id,
      refetchOnWindowFocus: false,
      refetchInterval(data) {
        if (data?.status === ConsoleapiSinkEndpointStatus.SINK_ENDPOINT_STATUS_CREATING) {
          return 5000
        }

        return false
      }
    }
  })

  if (isLoading) {
    return <Loader size="xs" />
  }

  const isAmazonMskEndpoint = sinkEndpointData?.endpoint_type === 'AMAZON_MSK'
  const endpointTypeLabel = isAmazonMskEndpoint
    ? 'AWS MSK Provisioned'
    : sinkEndpointData?.provider === 'aws'
      ? 'AWS Endpoint Service'
      : 'Endpoint Service'

  return (
    <PropertyCard withBorder={false} p={0}>
      <PropertyCard.Item label="Name" labelProps={{ miw: 160 }}>
        <CopiableProperty text={sinkEndpointData?.endpoint_name || ''} />
      </PropertyCard.Item>
      <PropertyCard.Item label="Status" labelProps={{ miw: 160 }}>
        <PrivateEndpointForChangefeedStatus status={sinkEndpointData?.status!} />
      </PropertyCard.Item>
      {sinkEndpointData?.created_at && (
        <PropertyCard.Item label="Created At" labelProps={{ miw: 160 }}>
          <TimeComponent time={sinkEndpointData.created_at} />
        </PropertyCard.Item>
      )}
      {sinkEndpointData?.endpoint_type && (
        <PropertyCard.Item label="Endpoint Type" labelProps={{ miw: 160 }}>
          {endpointTypeLabel}
        </PropertyCard.Item>
      )}
      {isAmazonMskEndpoint ? (
        <PropertyCard.Item label="MSK ARN" labelProps={{ miw: 160 }}>
          {sinkEndpointData?.msk_arn ? <CopiableProperty text={sinkEndpointData.msk_arn} /> : '-'}
        </PropertyCard.Item>
      ) : (
        <PropertyCard.Item label="Endpoint Service Name" labelProps={{ miw: 160 }}>
          {sinkEndpointData?.endpoint_service_name || '-'}
        </PropertyCard.Item>
      )}
      {sinkEndpointData?.endpoint_id && (
        <PropertyCard.Item label="Endpoint ID" labelProps={{ miw: 160 }}>
          <CopiableProperty text={sinkEndpointData?.endpoint_id} />
        </PropertyCard.Item>
      )}
      {sinkEndpointData?.service_region && (
        <PropertyCard.Item label="Service Region" labelProps={{ miw: 160 }}>
          {sinkEndpointData?.service_region}
        </PropertyCard.Item>
      )}
      {sinkEndpointData?.cloud_account_id && (
        <PropertyCard.Item label="Cloud Account ID" labelProps={{ miw: 160 }}>
          <CopiableProperty text={sinkEndpointData?.cloud_account_id} />
        </PropertyCard.Item>
      )}
      {sinkEndpointData?.endpoint_address && (
        <PropertyCard.Item label="Endpoint Address" labelProps={{ miw: 160 }}>
          <CopiableProperty text={sinkEndpointData?.endpoint_address} />
        </PropertyCard.Item>
      )}
      {sinkEndpointData?.endpoint_zones && (
        <PropertyCard.Item label="Availability Zones" labelProps={{ miw: 160 }}>
          {sinkEndpointData.endpoint_zones.join(', ') || '-'}
        </PropertyCard.Item>
      )}
      <PropertyCard.Item label="Advertised Listener" labelProps={{ miw: 160 }}>
        {sinkEndpointData?.advertised_listener ? getDomainType(sinkEndpointData.advertised_listener.domain_type) : '-'}
      </PropertyCard.Item>

      {sinkEndpointData?.advertised_listener?.root_domain_name && (
        <PropertyCard.Item label="Domain Name" labelProps={{ miw: 160 }}>
          {sinkEndpointData?.advertised_listener.root_domain_name}
        </PropertyCard.Item>
      )}

      {sinkEndpointData?.advertised_listener?.records && (
        <Card withBorder bg="carbon.2">
          <Stack>
            {sinkEndpointData?.advertised_listener?.records?.map((item) => (
              <Box key={item.subdomain_name}>
                <Group>
                  <Typography>
                    <b>{item.zone}</b>
                  </Typography>

                  <CodeBlock sx={{ flex: 1 }}>{item.subdomain_name!}</CodeBlock>
                </Group>
              </Box>
            ))}
          </Stack>
        </Card>
      )}
    </PropertyCard>
  )
}