import { useEffect, useMemo, useState } from 'react'

import { PageAccessGuard } from 'dbaas/contexts/access-control'
import { PageShell } from 'dbaas/layouts/v5/page'
import { AdminNavMenu } from 'dbaas/screens/ConsoleV2/Container/Admin/Navbar/NavMenu'
import { TiDBNextGen } from 'dbaas/screens/TiDBNextGen'
import useStores from 'dbaas/stores/useStores'
import { AccountProviders } from 'dbaas/utils/marketplace'

import { CreationWrapper } from './Wrapper'

export const CreationGuard = () => {
  const {
    store: {
      tenantData: { third_party_account_provider },
      activeProject: { aws_cmek_enabled: awsCmekEnabled }
    }
  } = useStores()

  const [isAlicloud, setIsAlicloud] = useState(false)

  useEffect(() => {
    if (third_party_account_provider === AccountProviders.alicloud) {
      setIsAlicloud(true)
    }
  }, [third_party_account_provider])

  const content = useMemo(
    () =>
      isAlicloud && !awsCmekEnabled ? (
        <TiDBNextGen onGenChange={() => setIsAlicloud(false)} />
      ) : (
        <CreationWrapper onGenChange={() => setIsAlicloud(true)} />
      ),
    [awsCmekEnabled, isAlicloud]
  )

  return (
    <PageAccessGuard
      id="ClusterCreationGate"
      fallback={(defaultFallback) => <PageShell title="Create Cluster">{defaultFallback}</PageShell>}
    >
      <AdminNavMenu />
      {content}
    </PageAccessGuard>
  )
}