import React from 'react';
import { Button, makeStyles, Snackbar, useTheme } from '@material-ui/core';
import { FluentIconButton } from '../inputs/buttons/FluentIconButton';
import { ChromeCloseIcon } from '@fluentui/react-icons';
const useStyles = makeStyles((theme) => ({
    root: {
        maxWidth: 600,
        '& > * + *': {
            marginTop: theme.spacing(2),
        },
        display: 'flex'
    },
    alertSecondary: {
        borderLeft: `4px solid ${theme.palette.secondary.main}`
    },
    alertPrimary: {
        borderLeft: `4px solid ${theme.palette.primary.main}`
    },
    alertSuccess: {
        borderLeft: `4px solid ${theme.palette.success.main}`
    },
    alertWarning: {
        borderLeft: `4px solid ${theme.palette.warning.main}`
    },
    alertError: {
        borderLeft: `4px solid ${theme.palette.error.main}`,
        color: theme.palette.error.main
    },
    alertInfo: {
        borderLeft: `4px solid ${theme.palette.info.main}`
    },
    '@global': {
        '.MuiSnackbarContent-root': {
            borderRadius: 0,
        },
    }
}));
export const AmbientToast = (props) => {
    const classes = useStyles(props);
    const { noticeType, noticeButton, noticeMessage, closeNotice, noticeOpen, noticeAction } = props;
    const theme = useTheme();
    const alertColor = () => {
        if (noticeType === 'secondary') {
            let alertLevel = classes.alertSecondary;
            return alertLevel;
        }
        else if (noticeType === 'primary') {
            let alertLevel = classes.alertPrimary;
            return alertLevel;
        }
        else if (noticeType === 'success') {
            let alertLevel = classes.alertSuccess;
            return alertLevel;
        }
        else if (noticeType === 'warning') {
            let alertLevel = classes.alertWarning;
            return alertLevel;
        }
        else if (noticeType === 'error') {
            let alertLevel = classes.alertError;
            return alertLevel;
        }
        else if (noticeType === 'info') {
            let alertLevel = classes.alertInfo;
            return alertLevel;
        }
    };
    const alertText = () => {
        if (noticeType === 'secondary') {
            return theme.palette.secondary.main;
        }
        else if (noticeType === 'primary') {
            return theme.palette.primary.main;
        }
        else if (noticeType === 'success') {
            return theme.palette.success.main;
        }
        else if (noticeType === 'warning') {
            return theme.palette.warning.main;
        }
        else if (noticeType === 'error') {
            return theme.palette.error.main;
        }
        else if (noticeType === 'info') {
            return theme.palette.info.main;
        }
    };
    return (React.createElement("div", { className: classes.root }, React.createElement(Snackbar, { classes: { root: alertColor() }, anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, open: noticeOpen, onClose: closeNotice, message: noticeMessage, key: 1, action: React.createElement("div", null, React.createElement(Button, { style: { color: alertText() }, size: "small", onClick: noticeAction }, noticeButton), React.createElement(FluentIconButton, { style: { color: 'white' }, size: "small", onClick: closeNotice, icon: ChromeCloseIcon, className: classes.icon })) })));
};
//# sourceMappingURL=AmbientToast.js.map