import { Alert, Descriptions, Spin } from 'antd'
import React, { useEffect, useRef, useState } from 'react'

import { getTenant } from 'apiClient/services/devops'
import { TenantGetTenantResp } from 'apiClient/services/devops/interface'

import { isSharedResourcePoolTenantId } from './shared'

export interface TenantDescriptionProps {
  tenantId: string
  onLoaded?: (tenantInfo: TenantGetTenantResp) => void
}

const DEFAULT_ERROR_MESSAGE = 'Failed to fetch tenant detail.'

function getErrorMessage(error: unknown) {
  const axiosLikeError = error as {
    response?: { data?: { errmsg?: string } }
    message?: string
  }

  return (
    axiosLikeError?.response?.data?.errmsg ||
    axiosLikeError?.message ||
    DEFAULT_ERROR_MESSAGE
  )
}

export const TenantDescription: React.FC<TenantDescriptionProps> = ({
  tenantId,
  onLoaded
}) => {
  const [tenantInfo, setTenantInfo] = useState<TenantGetTenantResp>()
  const [curError, setCurError] = useState<string>()
  const [loading, setLoading] = useState(false)
  const requestIdRef = useRef(0)

  useEffect(() => {
    if (!tenantId || isSharedResourcePoolTenantId(tenantId)) {
      setTenantInfo(undefined)
      setCurError(undefined)
      setLoading(false)
      return
    }

    const currentRequestId = requestIdRef.current + 1
    requestIdRef.current = currentRequestId

    const fetchInfo = async () => {
      setLoading(true)
      setCurError(undefined)
      setTenantInfo(undefined)

      try {
        const tenantData = (await getTenant(tenantId)).data

        if (currentRequestId !== requestIdRef.current) {
          return
        }

        setTenantInfo(tenantData)
        onLoaded?.(tenantData)
      } catch (error) {
        if (currentRequestId !== requestIdRef.current) {
          return
        }

        setCurError(getErrorMessage(error))
      } finally {
        if (currentRequestId === requestIdRef.current) {
          setLoading(false)
        }
      }
    }

    fetchInfo()
  }, [tenantId, onLoaded])

  if (isSharedResourcePoolTenantId(tenantId)) {
    return (
      <div style={{ width: '400px' }}>
        <Descriptions column={1} size="small">
          <Descriptions.Item label="Tenant">
            Shared Resource Pool
          </Descriptions.Item>
        </Descriptions>
      </div>
    )
  }

  if (curError) {
    return (
      <Alert
        message="Error"
        description={curError}
        type="error"
        showIcon
        style={{ width: '400px', marginBottom: '12px' }}
      />
    )
  }

  if (loading || !tenantInfo) {
    return (
      <div style={{ width: '400px', padding: '12px 0', textAlign: 'center' }}>
        <Spin />
      </div>
    )
  }

  return (
    <div style={{ width: '400px' }}>
      <Descriptions column={1} size="small">
        <Descriptions.Item label="Tenant">
          {tenantInfo.name} ({tenantInfo.id})
        </Descriptions.Item>
        <Descriptions.Item label="Region">
          {tenantInfo.region}
        </Descriptions.Item>
        <Descriptions.Item label="Status">
          {tenantInfo.status}
        </Descriptions.Item>
      </Descriptions>
    </div>
  )
}

export default TenantDescription