import { Group, HoverCard } from '@tidbcloud/uikit'
import { PropertyCard } from '@tidbcloud/uikit/biz'
import { IconInfoCircle } from '@tidbcloud/uikit/icons'

import { useListChangefeedInstanceTypes } from 'dbaas/services/dataflow'
import { DataflowConnectorType } from 'dbaas/services/dataflow/interface'

const useDedicatedSpecProperty = (specId: string, type: DataflowConnectorType, clusterId: string) => {
  const { data, isLoading } = useListChangefeedInstanceTypes(
    {
      connector_type: type,
      cluster_id: clusterId
    },
    {
      query: {
        refetchOnWindowFocus: false,
        refetchOnMount: false
      }
    }
  )
  const spec = data?.items?.find((i) => i.name === specId)
  const rps = spec?.rps_limit ?? 0
  const specDisplayName = `${spec?.rcu_num ?? '-'} RCUs`

  return {
    specDisplayName: isLoading ? 'Loading...' : specDisplayName,
    specDescription: `The maximum incremental replication performance is ${rps > 0 ? rps : '-'} rows/s`
  }
}

export const SpecificationProperty = ({ displayName, description }: { displayName: string; description: string }) => {
  return (
    <PropertyCard.Item label="Specification">
      <Group gap={8}>
        <span>{displayName}</span>
        <HoverCard withArrow withinPortal>
          <HoverCard.Target>
            <IconInfoCircle size={14} />
          </HoverCard.Target>
          <HoverCard.Dropdown>{description}</HoverCard.Dropdown>
        </HoverCard>
      </Group>
    </PropertyCard.Item>
  )
}

export const DedicatedSpecificationProperty = ({
  specId,
  type,
  clusterId
}: {
  specId: string
  type: DataflowConnectorType
  clusterId: string
}) => {
  const { specDisplayName: displayName, specDescription: description } = useDedicatedSpecProperty(
    specId,
    type,
    clusterId
  )
  return <SpecificationProperty displayName={displayName} description={description} />
}