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

import { TenantGetTenantResp } from 'apiClient/services/devops/interface'
import { isSharedResourcePoolTenantId } from 'components/ResourceDescription/shared'
import { TenantDescription } from 'components/ResourceDescription/TenantDescription'

interface TenantProps {
  tenantId: string
  text: string
}

export const TenantDetailLinkPopover: React.FC<TenantProps> = ({
  tenantId,
  text
}) => {
  const [tenantInfo, setTenantInfo] = useState<TenantGetTenantResp>()
  const [shouldLoad, setShouldLoad] = useState(false)

  useEffect(() => {
    setTenantInfo(undefined)
    setShouldLoad(false)
  }, [tenantId])

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

  const handleLoaded = useCallback((data: TenantGetTenantResp) => {
    setTenantInfo(data)
  }, [])
  const isSharedResourcePoolTenant = isSharedResourcePoolTenantId(tenantId)

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

  return (
    <Popover
      content={
        shouldLoad ? (
          <TenantDescription tenantId={tenantId} onLoaded={handleLoaded} />
        ) : (
          loadingContent
        )
      }
      trigger="hover"
      onOpenChange={handleOpenChange}
      mouseEnterDelay={0.3}
    >
      {isSharedResourcePoolTenant ? (
        <Typography.Text>{text}</Typography.Text>
      ) : (
        <Typography.Link
          href={`/orgs/${tenantInfo?.id || tenantId}/`}
          target="_blank"
        >
          {text}
        </Typography.Link>
      )}
    </Popover>
  )
}