import { Flex, Group, HoverCard, Loader, Stack, Typography } from '@tidbcloud/uikit'
import { IconInfoCircle } from '@tidbcloud/uikit/icons'
import { ReactNode } from 'react'

import { renderNodes } from 'dbaas/features/ClusterManagement/common'
import {
  V1beta1NodeInstance,
  V1beta1NodeInstanceState
} from 'dbaas/services/api-clients/v2023/dedicated/v1beta1/interface'

import { useSummaryData } from '../helper'

import { ResourceStatus } from './ResourceStatus'

type PropsType = {
  title: string
  desc: string
  modifying: boolean
  spec: ReactNode
  data: V1beta1NodeInstance[]
}

export const ResourceSummary = ({ title, desc, modifying, data }: PropsType) => {
  const { total, available, unavailable, creating, deleting } = useSummaryData(data)
  return (
    <Flex sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
      <Stack gap={4}>
        <Group gap="xs">
          <Typography variant="action-md" c="gray.9">
            {title}
          </Typography>
          <HoverCard position="right">
            <HoverCard.Target>
              <IconInfoCircle size={16} />
            </HoverCard.Target>
            <HoverCard.Dropdown>{desc}</HoverCard.Dropdown>
          </HoverCard>
        </Group>
        <Group>
          <Typography variant="body-lg" c="gray.9">
            Total {renderNodes(total)}
          </Typography>
          <ResourceStatus status={V1beta1NodeInstanceState.AVAILABLE} withNumber number={available} />
          <ResourceStatus status={V1beta1NodeInstanceState.UNAVAILABLE} withNumber number={unavailable} />
          <ResourceStatus status={V1beta1NodeInstanceState.CREATING} withNumber number={creating} />
          <ResourceStatus status={V1beta1NodeInstanceState.DELETING} withNumber number={deleting} />
        </Group>
      </Stack>
      {modifying && (
        <Group gap={8}>
          <Loader color="gray" size={22} />
          <Typography variant="label-lg">Modifying...</Typography>
        </Group>
      )}
    </Flex>
  )
}