import { Button, Flex } from '@tidbcloud/uikit'
import { useDisclosure } from '@tidbcloud/uikit/hooks'
import { lazy } from 'react'

import { AccessGuard } from 'dbaas/contexts/access-control'

import { ProjectPageShell } from '../components'
import { DedicatedOnly } from '../components/ProjectPageShell'

const EncryptionAccess = lazy(() => import('dbaas/screens/Project/EncryptionAccess'))
const CreateForm = lazy(() => import('dbaas/screens/Project/EncryptionAccess/CreateForm'))

const EncryptionAccessWrapper: React.FC<React.PropsWithChildren<unknown>> = () => {
  const [modalOpened, modalHandlers] = useDisclosure(false)

  return (
    <ProjectPageShell
      title={
        <Flex align="center">
          Encryption Access
          <DedicatedOnly />
        </Flex>
      }
      wrapperProps={{ sx: { display: 'flex', flexDirection: 'column', height: '100%' } }}
      bodyProps={{ px: 0, py: 0, sx: { flex: 1 } }}
      headerProps={{
        rightSection: (
          <AccessGuard id="ProjectCMEKAction">
            <Button size="sm" onClick={modalHandlers.open} data-mp-event="mp-createencryptionkey-1691461014326">
              Create Encryption Key
            </Button>
          </AccessGuard>
        )
      }}
    >
      <AccessGuard id="ProjectCMEKGate">
        <EncryptionAccess />
        <CreateForm opened={modalOpened} onClose={modalHandlers.close} />
      </AccessGuard>
    </ProjectPageShell>
  )
}

export default EncryptionAccessWrapper