import { Loader } from '@tidbcloud/uikit'
import { useTimeout } from '@tidbcloud/uikit/hooks'
import { observer } from 'mobx-react'
import { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'

import { PRIVATE_LINK_STATUS } from 'dbaas/features/ClusterManagement/feats/chat2query/common'
import { getClusterPrivateLinkStatus } from 'dbaas/services/dataservice'
import useStores from 'dbaas/stores/useStores'

import ContentLayout from './ContentLayout'
import { ITEM_KEY_CLUSTER_STATUS_MAP } from './utils'

const SqlEditor = observer(() => {
  const {
    store: { activeProjectId, tenantData }
  } = useStores()
  const { id: clusterId } = useParams() as { id: string }
  const [isGettingStatus, setIsGettingStatus] = useState(true)
  const { start: startGetClusterStatus, clear: stopGetClusterStatus } = useTimeout(() => {
    getClusterStatus()
  }, 1000)

  useEffect(() => {
    const statusMap = localStorage.getItem(ITEM_KEY_CLUSTER_STATUS_MAP)
    if (!statusMap || !JSON.parse(statusMap)[clusterId]) {
      startGetClusterStatus()
    } else {
      setIsGettingStatus(false)
      stopGetClusterStatus()
    }
  }, [])

  const getClusterStatus = async () => {
    try {
      const res = await getClusterPrivateLinkStatus(tenantData.id, activeProjectId, {
        cluster_ids: clusterId
      })

      if (res.data?.[0]?.link_status === PRIVATE_LINK_STATUS.NORMAL) {
        setIsGettingStatus(false)
        const statusMap = localStorage.getItem(ITEM_KEY_CLUSTER_STATUS_MAP) || '{}'
        localStorage.setItem(
          ITEM_KEY_CLUSTER_STATUS_MAP,
          JSON.stringify({
            ...JSON.parse(statusMap),
            [clusterId]: true
          })
        )
        stopGetClusterStatus()
        return
      }

      startGetClusterStatus()
    } catch (_e) {}
  }

  if (isGettingStatus) {
    return <Loader size="md" ml="50%" mt={200} />
  }

  return <ContentLayout />
})

export default SqlEditor