/**
 * @deprecated Use `Dialog` from `@material-hu/components/design-system/Dialog` instead.
 * Hugo Dialog is composition-based: `DialogHeader`, `DialogBody`, `DialogFooter`, `DialogActions`.
 * API differences: `title`/`body` props → `DialogHeader`+`DialogBody` children;
 * `primaryButtonProps`/`secondaryButtonProps` → `DialogActions` children;
 * `avatarColor`/`buttonColor`/`Icon` → not present in Hugo Dialog (handle in consumer).
 */
import { ReactNode } from 'react';

import WarningIcon from '@material-hu/icons/material/Warning';
import Avatar from '@material-hu/mui/Avatar';
import Box from '@material-hu/mui/Box';
import DialogContentText from '@material-hu/mui/DialogContentText';
import Paper from '@material-hu/mui/Paper';
import { alpha } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import Button, {
  ButtonProps,
} from '@material-hu/components/design-system/Buttons/Button';

type Props = {
  title: ReactNode;
  body?: ReactNode;
  primaryButtonProps?: ButtonProps;
  secondaryButtonProps?: ButtonProps;
  buttonColor?: string;
  avatarColor?: string;
  Icon?: JSX.Element | null;
};

const BasicModal = ({
  title,
  body,
  primaryButtonProps,
  secondaryButtonProps,
  avatarColor = 'error',
  buttonColor = 'error',
  Icon = <WarningIcon />,
}: Props) => (
  <Paper elevation={12}>
    <Box
      sx={{
        display: 'flex',
        pb: 2,
        pt: 3,
        px: 3,
      }}
    >
      {Icon && (
        <Avatar
          sx={{
            backgroundColor: theme =>
              alpha(theme.palette[avatarColor].main, 0.08),
            color: `${avatarColor}.main`,
            mr: 2,
          }}
        >
          {Icon}
        </Avatar>
      )}
      <Box>
        <Typography
          color="textPrimary"
          variant="h6"
        >
          {title}
        </Typography>
        <DialogContentText sx={{ mt: 1 }}>{body}</DialogContentText>
      </Box>
    </Box>
    <Box
      sx={{
        display: 'flex',
        justifyContent: 'flex-end',
        px: 3,
        py: 1.5,
      }}
    >
      {secondaryButtonProps?.onClick && (
        <Button
          variant="outlined"
          {...secondaryButtonProps}
          sx={{ mr: 2 }}
        />
      )}
      {primaryButtonProps?.onClick && (
        <Button
          {...primaryButtonProps}
          sx={{
            backgroundColor: `${buttonColor}.main`,
            '&:hover': {
              backgroundColor: `${buttonColor}.dark`,
            },
          }}
          variant="contained"
        />
      )}
    </Box>
  </Paper>
);

export default BasicModal;