import { Box, Divider, GroupProps, Stack, Typography } from '@tidbcloud/uikit'

import { PropertyKV } from 'dbaas/components'

interface RestoreSummaryCardProps {
  description: React.ReactNode
  footer?: React.ReactNode
}

export function RestoreSummaryCard({
  children,
  description,
  footer
}: React.PropsWithChildren<RestoreSummaryCardProps>) {
  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%', minHeight: 0 }}>
      <Box>
        <Typography variant="title-lg">Summary</Typography>
        <Typography variant="body-lg" c="carbon.7" mt={4}>
          {description}
        </Typography>
        <Box>{children}</Box>
      </Box>

      {footer && <Box sx={{ marginTop: 'auto' }}>{footer}</Box>}
    </Box>
  )
}

interface RestoreSummarySectionProps {
  title: React.ReactNode
  withDivider?: boolean
}

export function RestoreSummarySection({
  children,
  title,
  withDivider = true
}: React.PropsWithChildren<RestoreSummarySectionProps>) {
  return (
    <>
      <Stack gap={8} py="md">
        <Typography variant="title-md">{title}</Typography>
        {children}
      </Stack>
      {withDivider && <Divider />}
    </>
  )
}

interface RestoreSummaryItemProps extends GroupProps {
  label: React.ReactNode
  value: React.ReactNode
  isError?: boolean
  labelWidth?: number
}

export function RestoreSummaryItem({ label, value, isError, labelWidth = 144, ...props }: RestoreSummaryItemProps) {
  return (
    <PropertyKV label={label} labelProps={{ w: labelWidth }} valueProps={{ c: isError ? 'red' : undefined }} {...props}>
      {value}
    </PropertyKV>
  )
}