import { Badge, Group } from '@tidbcloud/uikit'
import { useEffect } from 'react'

import config from 'config'
import { SharedCluster } from 'dbaas/features/ClusterManagement/cluster'
import { ClusterPageShell } from 'dbaas/screens/ClusterV2/components'
import { BranchList } from 'dbaas/screens/ServerlessBranch/BranchList'
import { BranchTopButton } from 'dbaas/screens/ServerlessBranch/BranchTopButton'
import { ServerlessBranchProvider } from 'dbaas/screens/ServerlessBranch/context'

const ServerlessBranchShell = ({ cluster }: { cluster: SharedCluster }) => {
  useEffect(() => {
    document.title = `${config.PAGE_TITLE_PREFIX}Branches`
  }, [])
  return (
    <ServerlessBranchProvider cluster={cluster}>
      <ClusterPageShell
        wrapperProps={{
          sx: {
            display: 'flex',
            flexDirection: 'column',
            height: '100%',
            overflow: 'hidden'
          }
        }}
        headerProps={{
          rightSection: <BranchTopButton cluster={cluster} />
        }}
        bodyProps={{
          px: 0,
          sx: { flex: 1 }
        }}
        title={
          <Group gap={8}>
            Branches
            <Badge variant="outline" size="sm" color="carbon" c="carbon.7" fw={500}>
              Preview
            </Badge>
          </Group>
        }
      >
        <BranchList cluster={cluster} />
      </ClusterPageShell>
    </ServerlessBranchProvider>
  )
}

export default ServerlessBranchShell