import {Divider, IconButton, List, Menu, Tooltip} from "@mui/material";
import Badge from "@mui/material/Badge";
import * as React from "react";
import {ReactElement} from "react";
import Notification, {NotificationProps} from "./NotificationProps";

export interface MyNotificationProps {
    notifications: NotificationProps[],
    tooltipTitle: string,
    mainIcon: ReactElement
}

function MyNotifications(props: MyNotificationProps) {

    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
    const open = Boolean(anchorEl);
    const handleClick = (event: React.MouseEvent<HTMLElement>) => {
        setAnchorEl(event.currentTarget);
    };
    const handleClose = () => {
        setAnchorEl(null);
    };


    const NotificationItems = () => {
        const items = props.notifications.map((oneNotification, index, array) => {
            const notification = (<Notification {...oneNotification} />);
            const divider = (<Divider variant="inset" component="li"/>);
            return index + 1 !== array.length ? (<>{notification}{divider}</>) : (<>{notification}</>)
        });

        return (<>{items}</>)
    }

    return (
        <>
            <Tooltip title={props.tooltipTitle}>
                <IconButton
                    size="large"
                    aria-label={`show ${props.notifications.length} new items`}
                    color="inherit"
                    onClick={handleClick}
                >
                    <Badge badgeContent={props.notifications.length} color="error">
                        {props.mainIcon}
                    </Badge>
                </IconButton>
            </Tooltip>
            <Menu
                anchorEl={anchorEl}
                open={open}
                onClose={handleClose}
                onClick={handleClose}
                PaperProps={{
                    elevation: 0,
                    sx: {
                        overflow: 'visible',
                        filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
                        mt: 1.5,
                        '& .MuiAvatar-root': {
                            width: 32,
                            height: 32,
                            ml: -0.5,
                            mr: 1,
                        },
                        '&:before': {
                            content: '""',
                            display: 'block',
                            position: 'absolute',
                            top: 0,
                            right: 14,
                            width: 10,
                            height: 10,
                            bgcolor: 'background.paper',
                            transform: 'translateY(-50%) rotate(45deg)',
                            zIndex: 0,
                        }
                    },
                }}
                transformOrigin={{horizontal: 'right', vertical: 'top'}}
                anchorOrigin={{horizontal: 'right', vertical: 'bottom'}}
            >
                <List
                    sx={{width: '100%', maxWidth: 360, bgcolor: 'background.paper'}}
                >
                    <NotificationItems/>
                </List>
            </Menu>
        </>);
}

export default MyNotifications;