import React from 'react'

import { Center, Loader } from '@mantine/core'
import { useParams } from 'react-router-dom'

import {
  useCurCluster,
  useCurOrg,
  useQueryCluster,
  useQueryOrg
} from '~/hooks/state'

// TODO: integration with report layout which copy/paste between reports now
const ReportGuard: React.FC<React.PropsWithChildren> = ({ children }) => {
  const { orgId, cid } = useParams<'orgId' | 'cid'>()

  useQueryOrg(orgId || '')
  const { curOrg } = useCurOrg()

  useQueryCluster(orgId || '', cid || '')
  const { curCluster } = useCurCluster()

  const isLoading = !curOrg || !curCluster

  return isLoading ? (
    <Center style={{ height: '100%' }}>
      <Loader variant='bars' size='md' />
    </Center>
  ) : (
    <>{children}</>
  )
}

export default ReportGuard