import React from 'react'

import { Group, Skeleton, Stack, Text, Tooltip } from '@mantine/core'
import { IconInfoCircle } from '@tabler/icons-react'
import { Link } from 'react-router-dom'

import { clusterDetailTelemetry } from '~/telemetry'

import { MetricItemBase } from './types'

export const MetricOverview: React.FC<MetricItemBase> = ({
  title,
  subtitle,
  desc,
  value,
  suffix,
  warning = false,
  link
}) => {
  const body = (
    <Stack
      spacing={8}
      className='hover:shadow -m-2 p-2 rounded hover:bg-teal-50'
    >
      <Group spacing={4}>
        <Text fw={500} color='dark'>
          {title}
        </Text>
        {subtitle && <Text color='dimmed'>{subtitle}</Text>}
        {desc && (
          <Tooltip withArrow multiline maw={500} position='top' label={desc}>
            <div>
              <IconInfoCircle size={14} className='text-gray-500 block' />
            </div>
          </Tooltip>
        )}
      </Group>
      {value ? (
        <Group className='items-baseline' spacing={8}>
          <Text c={warning ? 'red' : 'teal'} fz={36} fw={700} lh={1}>
            {value}
          </Text>
          <Text c='dimmed' fw={300}>
            {suffix}
          </Text>
        </Group>
      ) : (
        <Skeleton height={40} />
      )}
    </Stack>
  )
  if (link.startsWith('http') || link.startsWith('/grafana')) {
    return (
      <a
        href={link}
        target='_blank'
        onClick={() =>
          clusterDetailTelemetry.clickMetricOverviewItem({
            metric_overview_item: title
          })
        }
      >
        {body}
      </a>
    )
  }
  if (link.startsWith('./') || link.startsWith('/')) {
    return (
      <Link
        to={link}
        onClick={() =>
          clusterDetailTelemetry.clickMetricOverviewItem({
            metric_overview_item: title
          })
        }
      >
        {body}
      </Link>
    )
  }
  return <>{body}</>
}