import React, { useMemo } from 'react'

import { LoadingOverlay } from '@mantine/core'
import { Navigate } from 'react-router-dom'
import useSWR from 'swr'

import { listOrgs } from '~/api'
import { AppLayout } from '~/components/Layout'
import { useUserStore } from '~/hooks/state'

const HomePage: React.FC = () => {
  const internal = useUserStore((state) => state.user?.internal)
  const { data: orgsRes } = useSWR('/orgs', () => listOrgs())

  const redirectPage = useMemo(() => {
    if (!orgsRes) {
      return ''
    }
    if (internal) {
      return '/clusters'
    }
    if (orgsRes.data.total! > 0) {
      return '/orgs'
    }
    return '/orgs/welcome'
  }, [internal, orgsRes])

  return (
    <AppLayout>
      {redirectPage && <Navigate to={redirectPage} replace={true} />}
      <LoadingOverlay loaderProps={{ size: 'md', variant: 'bars' }} visible />
    </AppLayout>
  )
}

export default HomePage