import { Alert, Box, Collapse, IconButton, Typography } from "@mui/material";
import { styled } from "@mui/material/styles";
import { useEffect, useState } from "react";

import GhostStyledIcon from "../Icon/GhostIcon";
import CloseIcon from '@mui/icons-material/Close';

const PREFIX = "Notification";

const classes = {
    root: `${PREFIX}-root`,
    icon: `${PREFIX}-icon`,
    text: `${PREFIX}-text`,
};

const StyledCollapse = styled(Collapse, { shouldForwardProp: prop => prop !== "square" })(
    ({ theme, square }) => ({
        [`& .${classes.root}`]: {
            borderRadius: square ? "0px" : "9px",
            paddingTop: "9px",
            paddingBottom: "9px",
            marginBottom: "10px",
            wordBreak: "break-word",
            justifyContent: "center",
            color: theme.colors.gray[700],
            "& a": {
                fontWeight: "500",
                color: theme.colors.gray[700],
                textDecoration: "underline",
            },
            "& .MuiAlert-message": {
                padding: "0px",
                flexGrow: "1",
            },
            "& .MuiAlert-action": {
                paddingLeft: "0px",
                "& .MuiIconButton-sizeSmall": {
                    padding: "0px",
                    "& .MuiSvgIcon-fontSizeSmall": {
                        fontSize: "1.14rem",
                    },
                },
            },
            "&.MuiAlert-filledSuccess": {
                color: "#253449",
            },
        },

        [`& .${classes.icon}`]: {
            fontSize: "16.5px",
            marginRight: "9px",
        },

        [`& .${classes.text}`]: {
            fontSize: "15px",
            lineHeight: "24px",
        },
    }),
);

const Notification = ({
    template = "info",
    dismissible = false,
    onDismiss,
    show,
    square = false,
    ...props
}) => {
    let icon;
    let severity = props.severity;
    let variant = props.variant;
    switch (template) {
        case "default":
        severity = "info";
        variant = "filled";
        break;
        case "success":
        icon = "check-circle";
        severity = "success";
        variant = "filled";
        break;
        case "error":
        icon = "alert-circle";
        severity = "error";
        variant = "filled";
        break;
        case "info":
        icon = "info";
        severity = "info";
        variant = "filled";
        break;
        case "warning":
        icon = "info";
        severity = "warning";
        variant = "filled";
        break;
    }

    const action =
        props.action || dismissible === false ? (
            props.action
        ) : (
            <IconButton
                aria-label="close"
                color="inherit"
                size="small"
                onClick={() => {
                    setOpen(false);
                    if (onDismiss) {
                        onDismiss();
                    }
                }}
                >
                <GhostStyledIcon component={CloseIcon} />
            </IconButton>
        );

    const [open, setOpen] = useState(true);
    useEffect(() => {
        if (show === true) {
            setOpen(true);
        }
    }, [show]);

    return (
        <StyledCollapse in={open} square={square}>
            <Alert
                variant={variant}
                icon={false}
                severity={severity}
                className={classes.root}
                action={action}
                {...props}
                elevation={8}
            >
                <Box display="flex" alignItems="center" justifyContent="center">
                    {icon && <GhostStyledIcon className={classes.icon} component={icon} />}
                    <Box display="flex" alignItems="center">
                        <Typography className={classes.text}>{props.children}</Typography>
                    </Box>
                </Box>
            </Alert>
        </StyledCollapse>
    );
};

export default Notification;