import { Badge, Box, Typography } from '@tidbcloud/uikit'
import { forwardRef } from 'react'

import { StateTag } from 'dbaas/screens/Cluster/ClusterInfo'
import { ClusterDisplayStatus } from 'dbaas/services'
import { Commonv1beta1ClusterState } from 'dbaas/services/api-clients/v2023/cluster-management/v1beta1/interface'
import { V1beta1RgClusterComponentState } from 'dbaas/services/dataflow/interface'

interface ClusterSelectItemProps {
  name: string
  provider: string
  region: string
  status: Commonv1beta1ClusterState | V1beta1RgClusterComponentState
  disabled: boolean
}

const RgClusterStatusMap = {
  [V1beta1RgClusterComponentState.ACTIONING]: 'peacock',
  [V1beta1RgClusterComponentState.HEALTHY]: 'green',
  [V1beta1RgClusterComponentState.BROKEN]: 'red'
}

export const ClusterSelectItem = forwardRef<HTMLDivElement, ClusterSelectItemProps>(
  ({ name, provider, region, status, ...others }: ClusterSelectItemProps, ref) => {
    return (
      <Box
        ref={ref}
        {...others}
        sx={others.disabled ? { filter: 'grayscale(1)', opacity: 0.5, cursor: 'not-allowed' } : undefined}
      >
        <Typography span variant="label-lg" mr={4}>
          {name}
        </Typography>
        <Typography span variant="body-md" mr={16}>
          ({provider}, {region})
        </Typography>
        {status in RgClusterStatusMap ? (
          <Badge color={RgClusterStatusMap[status]} variant="dot" size="lg" sx={{ padding: 0 }}>
            {status}
          </Badge>
        ) : (
          <StateTag displayStatus={status as ClusterDisplayStatus} />
        )}
      </Box>
    )
  }
)