import React, { useMemo } from 'react'

import { Badge, Group, Stack, Title } from '@mantine/core'

import { useCurCluster } from '~/hooks/state'
import { ClusterStatus, getStatusColor } from '~/utils/cluster-status'

import { BasicInfo } from './components/BasicInfo'
import { DetailItemsWithTimeRange } from './components/DetailItemsWithTimeRange'
import { MetricsOverview } from './components/MetricsOverview'
import { OtherDetailItems } from './components/OtherDetailItems'
import { ResourcePoolTopo } from './components/ResourcePoolTopo'
import { Slogans } from './components/Slogans'

const Page: React.FC = () => {
  const { curCluster } = useCurCluster()
  const statusColor = useMemo(
    () => getStatusColor(curCluster?.status),
    [curCluster?.status]
  )

  return (
    <Stack>
      <Group spacing='md'>
        <Title order={1} weight={300}>
          {curCluster?.name}
        </Title>
        <Group spacing='xs'>
          <Badge
            variant='outline'
            color={
              curCluster?.computed.isDedicated
                ? 'cyan'
                : curCluster?.computed.isByoc
                ? 'blue'
                : 'grape'
            }
            styles={{
              root: {
                fontWeight: 500
              }
            }}
          >
            {curCluster?.deployTypeV2 || 'Unknown'}
          </Badge>
          {curCluster?.status && (
            <Badge
              variant='outline'
              color={statusColor}
              styles={{
                root: {
                  fontWeight: 500
                }
              }}
            >
              {curCluster?.status}
            </Badge>
          )}
        </Group>
      </Group>

      <BasicInfo />

      {(curCluster?.computed.isResourcePool ||
        curCluster?.computed.isPremium ||
        curCluster?.computed.isByoc ||
        curCluster?.computed.isDedicated) && <ResourcePoolTopo />}

      <Slogans />

      {curCluster?.status !== ClusterStatus.Cleared &&
        curCluster?.status !== ClusterStatus.Deletecomplete &&
        curCluster?.computed.isDedicated && <MetricsOverview />}

      <DetailItemsWithTimeRange />

      <OtherDetailItems />
    </Stack>
  )
}

export default Page