import { Box } from '@tidbcloud/uikit'
import { useRafInterval, useUnmount } from 'ahooks'
import { observer } from 'mobx-react'
import { useEffect } from 'react'
import { Redirect, useParams } from 'react-router-dom'

import { getSharedCluster } from 'dbaas/features/ClusterManagement/cluster'
import useStores from 'dbaas/stores/useStores'

import { useClusterDashboard, useClusterStatusHandler, useFetchClusterException, useNavbarHidden } from './helpers'
import Navbar from './Navbar'
import ClusterRoutes from './Routes'

const ClusterContainer = observer(() => {
  const navbarHidden = useNavbarHidden()
  const { id: clusterId } = useParams<{ id: string }>()
  const {
    store: { clustersById },
    actions: { fetchCluster, setCurrentCluster }
  } = useStores()
  const sharedCluster = clustersById[clusterId]?.[0]

  const updateDashboardConfig = useClusterDashboard()
  const fetchExceptionHandler = useFetchClusterException()
  const clusterStatusHandler = useClusterStatusHandler()

  useEffect(() => {
    if (sharedCluster) {
      // in case access cluster detail directly
      clusterStatusHandler(sharedCluster)
      setCurrentCluster(sharedCluster)
      updateDashboardConfig(sharedCluster)
    } else {
      const promise = fetchCluster(clusterId).then((data) => {
        const sharedCluster = getSharedCluster(data)
        if (sharedCluster) {
          setCurrentCluster(sharedCluster)
          updateDashboardConfig(sharedCluster)
        }
        return sharedCluster!
      })
      fetchExceptionHandler(promise)
    }
  }, [
    sharedCluster,
    clusterId,
    clusterStatusHandler,
    fetchCluster,
    fetchExceptionHandler,
    setCurrentCluster,
    updateDashboardConfig
  ])

  useUnmount(() => {
    setCurrentCluster(null)
  })

  useRafInterval(
    () => {
      const promise = fetchCluster(clusterId).then((data) => {
        const sharedCluster = getSharedCluster(data)
        if (sharedCluster) {
          setCurrentCluster(sharedCluster)
        }

        return sharedCluster!
      })

      fetchExceptionHandler(promise)
    },
    20 * 1000,
    {
      immediate: true
    }
  )

  if (!clusterId) {
    return <Redirect to="/clusters" />
  }

  if (!sharedCluster) {
    return null
  }

  return (
    <Box h="100%">
      <Navbar hidden={navbarHidden} cluster={sharedCluster} />
      <ClusterRoutes cluster={sharedCluster} />
    </Box>
  )
})

export default ClusterContainer