import { BackgroundImage, Box, Flex, BoxProps } from '@tidbcloud/uikit'
import { mergeSxList } from '@tidbcloud/uikit/utils'

import { Logo } from 'dbaas/components'
import bg from 'media/signup-bg-v2.svg'

import { useIsMdScreen } from '../helpers'

interface PageShellProps extends BoxProps {
  leftProps?: BoxProps
  withLogo?: boolean
}

export const PageShell: React.FC<React.PropsWithChildren<PageShellProps>> = ({
  children,
  leftProps,
  withLogo = true,
  sx,
  ...rest
}) => {
  const isMd = useIsMdScreen()

  const Elem = (
    <Flex justify="center" h={isMd ? undefined : '100%'} align="center">
      {children}
    </Flex>
  )
  return (
    <Box sx={mergeSxList([() => ({ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }), sx])} {...rest}>
      {isMd ? (
        <Box w="100%" h="100%" {...leftProps}>
          {withLogo && (
            <Flex justify="center" align="center" pt={24} pb={40}>
              <Logo withText={false} w={40} height={40} viewBox="0 0 50 50" />
            </Flex>
          )}
          {Elem}
        </Box>
      ) : (
        <BackgroundImage w={'100%'} h={'100%'} src={bg} {...leftProps}>
          {withLogo && (
            <Box sx={{ position: 'absolute', left: 32, top: 32 }}>
              <Logo withText={true} colorScheme="light" height={50} width={300} />
            </Box>
          )}
          {Elem}
        </BackgroundImage>
      )}
    </Box>
  )
}