import { Popover, Spin, Typography } from 'antd'
import React, { useCallback, useEffect, useState } from 'react'

import { ClusterGetClusterResp } from 'apiClient/services/devops/interface'
import { ResourcePoolDescription } from 'components/ResourceDescription/ResourcePoolDescription'

interface ResourcePoolProps {
  resourcePoolId: string
  text: string
}

export const ResourcePoolDetailLinkPopover: React.FC<ResourcePoolProps> = ({
  resourcePoolId,
  text
}) => {
  const [resourcePoolInfo, setResourcePoolInfo] =
    useState<ClusterGetClusterResp>()
  const [shouldLoad, setShouldLoad] = useState(false)

  useEffect(() => {
    setResourcePoolInfo(undefined)
    setShouldLoad(false)
  }, [resourcePoolId])

  const handleOpenChange = (visible: boolean) => {
    if (visible) {
      setShouldLoad(true)
    }
  }

  const handleLoaded = useCallback((data: ClusterGetClusterResp) => {
    setResourcePoolInfo(data)
  }, [])

  const loadingContent = (
    <div style={{ width: '400px', padding: '12px 0', textAlign: 'center' }}>
      <Spin />
    </div>
  )

  return (
    <Popover
      content={
        shouldLoad ? (
          <ResourcePoolDescription
            resourcePoolId={resourcePoolId}
            onLoaded={handleLoaded}
          />
        ) : (
          loadingContent
        )
      }
      trigger="hover"
      onOpenChange={handleOpenChange}
      mouseEnterDelay={0.3}
    >
      <Typography.Link
        href={`/sharedResourcePool/${resourcePoolInfo?.id || resourcePoolId}`}
        target="_blank"
      >
        {text}
      </Typography.Link>
    </Popover>
  )
}