import { Box } from '@tidbcloud/uikit'
import { observer } from 'mobx-react'
import { lazy, useEffect } from 'react'

import config from 'config'
import { IndependentPageShell } from 'dbaas/layouts/v5/page'
import { HelpCenterProvider } from 'dbaas/screens/HelpCenter/context'

const DataService = lazy(() => import('dbaas/screens/DataService'))

const DataServiceWrapper: React.FC<React.PropsWithChildren<unknown>> = observer(() => {
  useEffect(() => {
    document.title = `${config.PAGE_TITLE_PREFIX}Data Service`
  }, [])

  return (
    <IndependentPageShell>
      <HelpCenterProvider>
        <Box
          bg="carbon.1"
          sx={{
            display: 'flex',
            flexDirection: 'column',
            height: '100vh',
            position: 'relative'
          }}
        >
          <DataService />
        </Box>
      </HelpCenterProvider>
    </IndependentPageShell>
  )
})

export default DataServiceWrapper