import {
  Alert,
  Box,
  Typography,
  type AlertProps,
  type TypographyProps,
} from '@mui/material'

interface NoDataAlertProps {
  title?: string
  body?: string
  severity?: AlertProps['severity']
}

export function NoDataAlert({
  title = 'No data available',
  body = 'There are no results for the combination of filters applied to your data. Try tweaking your filters, or zoom and pan the map to adjust the Map View.',
  severity,
}: NoDataAlertProps) {
  if (severity) {
    return (
      <Alert title={title} severity={severity}>
        <AlertBody>{body}</AlertBody>
      </Alert>
    )
  }

  return (
    <Box>
      {title && <Typography variant='body2'>{title}</Typography>}
      <AlertBody color='textSecondary'>{body}</AlertBody>
    </Box>
  )
}

// Aux
interface AlertBodyProps {
  color?: TypographyProps['color']
  children: React.ReactNode
}

function AlertBody({ color, children }: AlertBodyProps) {
  if (children) {
    return (
      <Box mt={0.5}>
        <Typography
          component='div'
          variant='caption'
          color={color ?? 'inherit'}
          style={{ fontWeight: 'normal' }}
        >
          {children}
        </Typography>
      </Box>
    )
  }

  return <Box mt={-1} />
}