import React from 'react';
import { Hook } from '../hook';
import {
    Snackbar,
    SnackbarOrigin,
} from '@mui/material';
import MuiAlert, { AlertProps } from '@mui/material/Alert';

const AlertMui = React.forwardRef<HTMLDivElement, AlertProps>(
    (props, ref) => (
        <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />
    )
);

interface AlertData {
    type: 'error' | 'warning' | 'info' | 'success',
    message: string,
    position?: SnackbarOrigin,
    autoHideDuration?: number,
}

interface AlertOutput {
}

export const Alert = Hook.Dialog<AlertData, AlertOutput>(({ data, open, onClose }) => {
    const { type, message, position, autoHideDuration } = data;

    const handleClose = (event: any, reason?: string) => {
        if (reason === 'clickaway') {
            return;
        }
        if (onClose) {
            onClose({ data: {} });
        }
    }
    return (
        <Snackbar
            anchorOrigin={position}
            open={Boolean(message) && open}
            autoHideDuration={autoHideDuration ? autoHideDuration : 6000}
            onClose={handleClose}>

            <AlertMui
                severity={type}
                elevation={6}
                variant="filled"
                onClose={handleClose} >

                {message}
            </AlertMui>
        </Snackbar>
    );
});