import { Group, Typography, Box, Stack, HoverCard } from '@tidbcloud/uikit'
import { Dot } from '@tidbcloud/uikit/biz'
import { upperFirst } from 'lodash-es'

import { V1beta1NodeInstanceState } from 'dbaas/services/api-clients/v2023/dedicated/v1beta1/interface'

export const getDotByStatus = (status?: V1beta1NodeInstanceState) => {
  switch (status) {
    case V1beta1NodeInstanceState.AVAILABLE:
      return <Dot color="green" bg="green.7" size={8} />
    case V1beta1NodeInstanceState.UNAVAILABLE:
      return <Dot color="red" bg="red.7" size={8} />
    case V1beta1NodeInstanceState.CREATING:
      return <Dot color="peacock" bg="peacock.7" size={8} />
    case V1beta1NodeInstanceState.DELETING:
      return <Dot color="gray" bg="gray.7" size={8} />
  }
}

export const ResourceStatus = ({
  status,
  withNumber = false,
  number
}: {
  status?: V1beta1NodeInstanceState
  withNumber?: boolean
  number?: number
}) => (
  <Group gap={4}>
    {getDotByStatus(status)}
    <Typography variant="body-lg" c="gray.9">
      {withNumber && number} {upperFirst(status?.toLowerCase())}
    </Typography>
  </Group>
)

export const ResourceCard = ({
  name,
  state,
  availabilityZone
}: {
  name: string
  state?: V1beta1NodeInstanceState
  availabilityZone: string
}) => {
  return (
    <Box
      w={204}
      h={60}
      py={8}
      px="md"
      sx={(t) => {
        const baseStyle = { borderRadius: 8 }
        switch (state) {
          case V1beta1NodeInstanceState.AVAILABLE:
            return { border: `1px solid ${t.colors.green[4]}`, background: t.colors.green[0], ...baseStyle }
          case V1beta1NodeInstanceState.UNAVAILABLE:
            return { border: `1px solid ${t.colors.red[4]}`, background: t.colors.red[1], ...baseStyle }
          case V1beta1NodeInstanceState.CREATING:
            return { border: `1px solid ${t.colors.peacock[4]}`, background: t.colors.peacock[0], ...baseStyle }
          case V1beta1NodeInstanceState.DELETING:
            return { border: `1px solid ${t.colors.gray[4]}`, background: t.colors.gray[1], ...baseStyle }
          default:
            return { border: `1px solid ${t.colors.green[4]}`, background: t.colors.green[0], ...baseStyle }
        }
      }}
    >
      <Stack gap={4}>
        <Group gap={6}>
          {getDotByStatus(state)}
          <HoverCard>
            <HoverCard.Target>
              <Typography
                variant="action-md"
                c="gray.8"
                w={0}
                sx={{
                  flex: 1,
                  cursor: 'pointer',
                  overflow: 'hidden',
                  wordBreak: 'keep-all',
                  whiteSpace: 'nowrap',
                  textOverflow: 'ellipsis'
                }}
              >
                {name}
              </Typography>
            </HoverCard.Target>
            <HoverCard.Dropdown>
              <Typography variant="action-md" c="gray.8">
                {name}
              </Typography>
            </HoverCard.Dropdown>
          </HoverCard>
        </Group>
        <Typography variant="body-lg" c="gray.8">
          AZ : {availabilityZone}
        </Typography>
      </Stack>
    </Box>
  )
}