import { Box, Flex, Loader } from '@tidbcloud/uikit'
import { ProTable, MRT_ColumnDef } from '@tidbcloud/uikit/biz'
import { observer } from 'mobx-react'
import { useEffect } from 'react'
import { Link } from 'react-router-dom'

import { AccessGuard } from 'dbaas/contexts/access-control'
import { CloudProviderConst } from 'dbaas/features/Project'
import { CentralAwsVpcPeering, CentralGcpVpcPeering } from 'dbaas/services'
import { useListAwsVpcPeerings, useListGcpVpcPeerings } from 'dbaas/services'
import useStores from 'dbaas/stores/useStores'

import { StatusCell } from './VPCList'

const VPCForCluster = ({
  provider,
  region,
  onVPCChange
}: {
  provider: string
  region: string
  onVPCChange?: (created: boolean) => void
}) => {
  const { store } = useStores()
  const { tenantData, activeProjectId } = store

  const params = [tenantData.id, activeProjectId, { region }] as const
  const { data: awsData, isLoading: isLoadingAws } = useListAwsVpcPeerings(...params, {
    query: { enabled: provider === 'aws', refetchInterval: 10 * 1000 }
  })
  const { data: gcpData, isLoading: isLoadingGcp } = useListGcpVpcPeerings(...params, {
    query: { enabled: provider === 'gcp', refetchInterval: 10 * 1000 }
  })
  const loading = isLoadingAws || isLoadingGcp
  const vpc = awsData?.items || gcpData?.items

  useEffect(() => {
    onVPCChange?.(!!vpc?.length)
  }, [vpc, onVPCChange])

  const awsColumns: MRT_ColumnDef<CentralAwsVpcPeering>[] = [
    {
      header: 'Region',
      accessorFn: (row) => row.region_name
    },
    {
      header: 'Status',
      accessorFn: (rowData: CentralAwsVpcPeering) => <StatusCell provider="aws" rowData={rowData} />,
      id: 'status'
    },
    {
      header: 'Your VPC CIDR',
      accessorKey: 'tenant_vpc_cidr'
    },
    {
      header: 'Your VPC ID',
      accessorKey: 'tenant_vpc_id'
    },
    {
      header: 'Peering ID',
      accessorKey: 'vpc_peering_id'
    },
    {
      header: 'TiDB Cloud CIDR',
      accessorKey: 'vpc_cidr'
    }
  ]

  const gcpColumns: MRT_ColumnDef<CentralGcpVpcPeering>[] = [
    {
      header: 'Region',
      accessorKey: 'region_name'
    },
    {
      header: 'Status',
      accessorFn: (rowData: CentralGcpVpcPeering) => <StatusCell provider="gcp" rowData={rowData} />,
      id: 'status'
    },
    {
      header: 'Your VPC CIDR',
      accessorKey: 'tenant_vpc_cidr'
    },
    {
      header: 'Your Project ID',
      accessorKey: 'tenant_project_id'
    },
    {
      header: 'Your VPC Network Name',
      accessorKey: 'tenant_network_name'
    },
    {
      header: 'TiDB Project ID',
      accessorKey: 'project_id'
    },
    {
      header: 'TiDB VPC Network Name',
      accessorKey: 'network_name'
    },
    {
      header: 'TiDB Cloud CIDR',
      accessorKey: 'vpc_cidr'
    }
  ]

  return !loading ? (
    <div style={{ overflow: 'auto' }}>
      {vpc && vpc.length ? (
        <>
          <p>
            View existing VPC Peering in this project.
            <Link style={{ marginLeft: '0.5rem' }} to={'/project/network-access/vpc-peerings'}>
              View
            </Link>
          </p>
          <AccessGuard id="ProjectNetworkAction">
            <p>
              Add VPC Peering for this region.{' '}
              <Link
                style={{ marginLeft: '0.5rem' }}
                to={`/project/network-access/vpc-peerings/add-vpc?provider=${provider}&region=${region}`}
              >
                Add
              </Link>
            </p>
          </AccessGuard>

          {provider === CloudProviderConst.AWS && (
            <ProTable columns={awsColumns} data={vpc as CentralAwsVpcPeering[]} />
          )}
          {provider === CloudProviderConst.GCP && (
            <ProTable columns={gcpColumns} data={vpc as CentralGcpVpcPeering[]} />
          )}
        </>
      ) : (
        <p>
          No VPC Peering found in this region.{' '}
          <AccessGuard id="ProjectNetworkAction">
            <Link
              style={{ marginLeft: '0.5rem' }}
              to={`/project/network-access/vpc-peerings/add-vpc?provider=${provider}&region=${region}`}
            >
              Create
            </Link>
          </AccessGuard>
        </p>
      )}
    </div>
  ) : (
    <Flex align="center">
      <Loader size="sm" />
      <Box ml={5}>loading..</Box>
    </Flex>
  )
}

export default observer(VPCForCluster)