import React from 'react'
import { PropsWithChildren } from 'react'

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

export const DetailsDrawer = ({ children, ...restProps }: DrawerProps) => {
  return (
    <Drawer
      position='right'
      size={960}
      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