ConfirmModal.tsx

import React from 'react';
import { Grid2 as Grid, Stack } from '@mui/material';
import { colors, modalStyle } from 'components/common';
import { Button } from '../Input/Button';
import { Heading2, BodyText } from '../Typography';
import { NotificationModalProps } from './types';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
    faCheckCircle,
    faExclamationCircle,
    faExclamationTriangle,
    faInfoCircle,
} from '@fortawesome/free-solid-svg-icons';

/**
 * A reusable modal component that displays a confirmation dialog.
 * It allows users to confirm or cancel an action with customizable text and styles.
 * @param {Object} props - The properties for the confirmation modal.
 * @param {string} [props.style="default"] - The style of the modal, which determines its color scheme and icon.
 * @param {string} props.header - The main title of the modal.
 * @param {string} [props.subHeader] - An optional secondary title for additional context.
 * @param {Array<{ text: string; bold?: boolean }>} props.subText - An array of objects containing text to display in the modal, with optional bold styling.
 * @param {string} props.subTextId - An optional string that matches the aria-describedby label from the parent <Modal> component to this child component.
 * @param {() => void} props.handleConfirm - A function to call when the user confirms the action.
 * @param {() => void} props.handleClose - A function to call when the user cancels the action or closes the modal.
 * @param {string} [props.confirmButtonText="Confirm"] - The text for the confirm button.
 * @param {string} [props.cancelButtonText="Cancel"] - The text for the cancel button.
 * @returns A JSX element representing the confirmation modal.
 * @example
 * <ConfirmModal
 *     style="warning"
 *     header="Delete Item"
 *     subHeader="Are you sure?"
 *     subText={[{ text: 'This action cannot be undone.', bold: true }]}
 *     subTextId="delete-files-modal-subtext"
 *     handleConfirm={() => console.log('Confirmed')}
 *     handleClose={() => console.log('Cancelled')}
 *     confirmButtonText="Yes, Delete"
 *     cancelButtonText="No, Keep It"
 *  />
 */
const ConfirmModal = ({
    style = 'default',
    icon,
    header,
    subHeader,
    subText,
    subTextId,
    handleConfirm,
    handleClose,
    confirmButtonText = 'Confirm',
    cancelButtonText = 'Cancel',
}: NotificationModalProps) => {
    const palette = colors.notification[style];
    const iconMap = {
        default: faInfoCircle,
        danger: faExclamationCircle,
        warning: faExclamationTriangle,
        success: faCheckCircle,
    };
    return (
        <Grid
            container
            direction="row"
            justifyContent="flex-start"
            alignItems="flex-start"
            sx={{ ...modalStyle, borderColor: palette.shade }}
            aria-label={`${header} ${subHeader}`}
            spacing={2}
        >
            <Grid size="auto" sx={{ pt: 1.25, fontSize: '16px' }}>
                <FontAwesomeIcon icon={icon ?? iconMap[style]} color={palette.icon} size="2x" />
            </Grid>
            <Grid
                size="grow"
                container
                direction="row"
                justifyContent="flex-start"
                alignItems="space-between"
                rowSpacing={1}
            >
                <Grid container direction="row" size={12}>
                    <Grid size={12}>
                        <Heading2 sx={{ mb: 0 }}>{header}</Heading2>
                    </Grid>
                </Grid>
                {subHeader && (
                    <Grid container direction="row" size={12}>
                        <BodyText bold>{subHeader}</BodyText>
                    </Grid>
                )}
                <Grid container id={subTextId ?? undefined} direction="row" size={12} sx={{ mt: '1em' }}>
                    {subText.map((subtext, index) => (
                        <Grid key={index} size={12}>
                            <BodyText bold={subtext.bold} sx={{ mb: 1 }}>
                                {subtext.text}
                            </BodyText>
                        </Grid>
                    ))}
                    <Grid
                        container
                        direction={{ xs: 'column', sm: 'row' }}
                        size={12}
                        justifyContent="flex-end"
                        spacing={1}
                        sx={{ mt: '1em' }}
                    >
                        <Stack direction="row" spacing={1} width="100%" justifyContent="flex-end">
                            <Button type="button" onClick={handleClose} autoFocus>
                                {cancelButtonText}
                            </Button>
                            <Button variant="primary" color={style} onClick={handleConfirm} type="submit">
                                {confirmButtonText}
                            </Button>
                        </Stack>
                    </Grid>
                </Grid>
            </Grid>
        </Grid>
    );
};

export default ConfirmModal;