import { Flex, Stack } from '@tidbcloud/uikit'
import { useDisclosure } from '@tidbcloud/uikit/hooks'

import { PremiumConnectModal } from 'dbaas/screens/NextGen/premium/shared/connection/ConnectModal'
import { TidbCreatingAlertMessage } from 'dbaas/screens/NextGen/tidb-creation/shared/CreatingAlertMessage'
import { useSharedTiDBContext } from 'dbaas/screens/NextGen/tidb-mgmt-container/shared/tidb-context'
import { TiDBPageShell } from 'dbaas/screens/NextGen/tidb-mgmt-container/shared/TiDBPageShell'

import { StandardCapacity } from '../capacity/view'

import { TiDBOnboaring } from './guide'
import { PremiumOverviewHeaderRightSection } from './header/HeaderRightSection'
import { MetricsPanel } from './metrics'
import { TiDBPropPanel } from './props'

export const TiDBOverview = () => {
  const tidb = useSharedTiDBContext()
  const [connectOpened, connectHandlers] = useDisclosure(false)

  return (
    <TiDBPageShell
      title="Overview"
      headerProps={{
        rightSection: <PremiumOverviewHeaderRightSection openConnect={connectHandlers.open} />
      }}
      bodyProps={{
        px: 0,
        pb: 96
      }}
    >
      <Stack gap="xl" justify="flex-start" px="xl" miw={937}>
        <TidbCreatingAlertMessage />
        <Flex
          gap="xl"
          align="stretch"
          miw={505}
          sx={(theme) => ({
            [`@media (max-width: ${theme.breakpoints.lg}px)`]: {
              flexWrap: 'wrap'
            }
          })}
        >
          <Flex
            direction="column"
            miw={416}
            gap="xl"
            sx={(theme) => ({
              [`@media (max-width: ${theme.breakpoints.lg}px)`]: {
                flex: 1
              },
              [`@media (min-width: ${theme.breakpoints.lg}px)`]: {
                maxWidth: 480
              }
            })}
          >
            <TiDBPropPanel tidb={tidb} />

            {/** capacity card **/}
            <StandardCapacity tidb={tidb} />
          </Flex>
          <Flex direction="column" gap="xl" sx={{ flex: 1 }} miw={640}>
            {!tidb.computed.isCassandra && <TiDBOnboaring tidb={tidb} openConnect={connectHandlers.open} />}
            {/** monitoring card **/}
            <MetricsPanel tidb={tidb} />
          </Flex>
        </Flex>
      </Stack>
      <PremiumConnectModal tidb={tidb} opened={connectOpened} onClose={connectHandlers.close} />
    </TiDBPageShell>
  )
}

export default TiDBOverview