import { Box, BoxProps, Drawer, DrawerProps, Group, GroupProps, Typography, TypographyProps } from '@tidbcloud/uikit'
import { PropsWithChildren } from 'react'

export const DetailsDrawer = ({ children, ...restProps }: DrawerProps) => {
  return (
    <Drawer
      position="right"
      size={640}
      styles={(theme) => ({
        content: {
          display: 'flex',
          flexDirection: 'column'
        },
        body: {
          flex: 1,
          display: 'flex',
          flexDirection: 'column',
          overflowY: 'auto',
          padding: 0
        },
        header: {
          padding: '16px 16px 16px 24px',
          marginBottom: 0,
          borderBottom: `1px solid ${theme.colors.carbon[4]}`
        },
        title: {
          fontWeight: 700,
          fontSize: 16,
          lineHeight: 1.5,
          color: theme.colors.carbon[9]
        }
      })}
      {...restProps}
    >
      {children}
    </Drawer>
  )
}

const DetailsDrawerBody = ({ children, ...restProps }: PropsWithChildren<BoxProps>) => {
  return (
    <Box p="xl" sx={{ flex: 1 }} {...restProps}>
      {children}
    </Box>
  )
}

const DetailsDrawerFooter = ({ children, ...restProps }: GroupProps) => {
  return (
    <Group
      justify="flex-end"
      px="xl"
      py="md"
      sx={(theme) => ({ borderTop: `1px solid ${theme.colors.carbon[4]}` })}
      {...restProps}
    >
      {children}
    </Group>
  )
}

interface DetailsDrawerItemProps extends GroupProps {
  label: string
  labelProps?: TypographyProps
  valueProps?: TypographyProps
}

const DetailsDrawerItem = ({ label, children, valueProps, labelProps, ...restProps }: DetailsDrawerItemProps) => {
  return (
    <Group gap="md" h={32} {...restProps}>
      <Typography variant="label-lg" c="carbon.7" miw={128} {...labelProps}>
        {label}
      </Typography>
      <Typography variant="body-lg" sx={{ wordBreak: 'break-all' }} {...valueProps}>
        {children}
      </Typography>
    </Group>
  )
}

DetailsDrawer.Body = DetailsDrawerBody
DetailsDrawer.Footer = DetailsDrawerFooter
DetailsDrawer.Item = DetailsDrawerItem