import { Button, Card, Typography, Group, CardProps } from '@tidbcloud/uikit'
import { Link } from 'react-router-dom'

import { SharedCluster } from 'dbaas/features/ClusterManagement/cluster'
import { MetricsPanel as PremiumMetricsPanel } from 'dbaas/screens/NextGen/premium/overview/metrics'
import { useSharedTiDBContextSafe } from 'dbaas/screens/NextGen/tidb-mgmt-container/shared/tidb-context'

import MonitorPanel from './Panel'

interface MonitorCardProps extends Omit<CardProps, 'children'> {
  cluster: SharedCluster
}

const MonitorCard = ({ cluster, ...rootProps }: MonitorCardProps) => {
  const tidb = useSharedTiDBContextSafe()
  const isLoading = cluster.computed.loading || cluster.computed.creating || cluster.computed.restoring
  const moreLink = cluster.computed.isEssentialV2
    ? `/tidbs/${cluster.id}/metrics`
    : `/clusters/${cluster.id}/monitoring`

  if (cluster.computed.isEssentialV2 && tidb) {
    return <PremiumMetricsPanel tidb={tidb} />
  }

  return (
    <Card p="xl" {...rootProps}>
      <Group justify="space-between" mb={16}>
        <Typography variant="headline-sm">Core Metrics</Typography>
        {!isLoading && (
          <Button
            variant="default"
            size="xs"
            component={Link}
            to={moreLink}
            sx={(theme) => ({
              '&:hover': {
                textDecoration: 'none',
                color: theme.colors.carbon[8]
              }
            })}
            data-mp-event="Monitor More Clicked"
          >
            More
          </Button>
        )}
      </Group>
      <MonitorPanel cluster={cluster} />
    </Card>
  )
}

export default MonitorCard