import React from 'react'

import { FireFilled } from '@ant-design/icons'
import { getValueFormat } from '@baurine/grafana-value-formats'
import { Tag, Typography } from 'antd'
import { PresetColorType, PresetStatusColorType } from 'antd/lib/_util/colors'
import { LiteralUnion } from 'antd/lib/_util/type'
import { To, useNavigate } from 'react-router-dom'

const { Text } = Typography

type DetailItemCardProps = {
  name?: string
  tag?: {
    name: string
    color: LiteralUnion<PresetColorType | PresetStatusColorType, string>
  }
  hot?: number
  desc?: string
  to?: To
  disabled?: boolean
  onClick?: () => void
}

export const DetailItemCard: React.FC<
  React.PropsWithChildren<DetailItemCardProps>
> = ({ name, tag, hot, desc, to, disabled = false, onClick, children }) => {
  const navigate = useNavigate()
  return (
    <div
      className={`relative h-32 p-4 rounded-lg bg-white border border-solid border-gray-200 flex flex-col items-center justify-center hover:shadow-lg cursor-pointer ${
        disabled ? 'cursor-not-allowed' : ''
      }`}
      onClick={() => {
        if (disabled) {
          return
        }
        onClick?.()
        to && navigate(to)
      }}
    >
      {children ? (
        <>{children}</>
      ) : name ? (
        <Text disabled={disabled}>{name}</Text>
      ) : null}
      {!!desc && (
        <Text className='mt-4 text-center' type='secondary'>
          {desc}
        </Text>
      )}

      {!!tag && (
        <Tag className='absolute top-4 left-0' color={tag.color}>
          {tag.name}
        </Tag>
      )}

      {!!hot && (
        <Tag className='absolute top-4 right-0 mr-0' color='#cd201f'>
          <FireFilled /> {getValueFormat('short')(hot)}
        </Tag>
      )}
    </div>
  )
}