import { Box, Group } from '@tidbcloud/uikit'
import { IconQuestion } from '@tidbcloud/uikit/icons'
import { useHistory } from 'react-router-dom'

import { CentralAwsVpcPeering, CentralGcpVpcPeering } from 'dbaas/services'
import useSessionStorage from 'dbaas/utils/useSessionStorage'

export const StatusCell = ({
  provider,
  rowData
}: {
  provider: string
  rowData: CentralAwsVpcPeering | CentralGcpVpcPeering
}) => {
  const history = useHistory()
  const { status } = rowData
  const [, setVPCPeering] = useSessionStorage<CentralAwsVpcPeering | CentralGcpVpcPeering>('vpc_peering_info')

  return status === 'pending' || status === 'approved' ? (
    <Group gap={8}>
      <Box>system checking</Box>
      <a
        href={`/project/network-access/vpc-peerings/approve-vpc?provider=${provider}`}
        title="How to approve?"
        onClick={(e) => {
          e.preventDefault()
          setVPCPeering(rowData)
          history.push(`/project/network-access/vpc-peerings/approve-vpc?provider=${provider}`)
        }}
      >
        <Box
          component={IconQuestion}
          radius="50%"
          c="carbon.8"
          sx={(theme) => ({
            border: `1px solid ${theme.colors.carbon[5]}`,
            borderRadius: ' 50%'
          })}
        ></Box>
      </a>
    </Group>
  ) : (
    <span>{status}</span>
  )
}