import * as React from 'react';
import { styled, alpha } from '@mui/material/styles';
import Menu, { MenuProps } from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import { CircularProgress, IconButton, PopoverOrigin, SvgIcon, Typography } from '@mui/material';
import { MoreVert } from '@mui/icons-material';

type PlacementType = {
    anchorOrigin?: PopoverOrigin;
    transformOrigin?: PopoverOrigin;
};

const StyledMenu = styled((props: MenuProps & { placement: Required<PlacementType> }) => (
    <Menu elevation={0} anchorOrigin={props.placement.anchorOrigin} transformOrigin={props.placement.transformOrigin} {...props} />
))(({ theme }) => ({
    '& .MuiPaper-root': {
        borderRadius: 6,
        marginTop: theme.spacing(1),
        minWidth: 180,
        color: theme.palette.mode === 'light' ? 'rgb(55, 65, 81)' : theme.palette.grey[300],
        boxShadow:
            'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px',
        '& .MuiMenu-list': {
            padding: '4px 0',
        },
        '& .MuiMenuItem-root': {
            '& .MuiSvgIcon-root': {
                fontSize: 18,
                color: theme.palette.text.secondary,
                marginRight: theme.spacing(1.5),
            },
            '&:active': {
                backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
            },
        },
    },
}));

type ActionPopMenuProps = {
    mainIcon?: React.ReactNode;
    buttons: {
        icon: React.ReactNode;
        label: string;
        onClick: () => void;
        disabled?: boolean;
        loading?: boolean;
        dontCloseOnClick?: boolean;
    }[];
    placement?: PlacementType;
};

export default function ActionPopMenu({ buttons, mainIcon, placement }: ActionPopMenuProps) {
    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
    const open = Boolean(anchorEl);
    const handleClick = (event: React.MouseEvent<HTMLElement>) => {
        event.stopPropagation();
        setAnchorEl(event.currentTarget);
    };
    const handleClose = () => {
        setAnchorEl(null);
    };

    return (
        <div>
            <IconButton
                id='demo-customized-button'
                aria-controls={open ? 'demo-customized-menu' : undefined}
                aria-haspopup='true'
                aria-expanded={open ? 'true' : undefined}
                onClick={handleClick}
                color='primary'
            >
                {mainIcon ? mainIcon : <MoreVert />}
            </IconButton>
            <StyledMenu
                id='demo-customized-menu'
                MenuListProps={{
                    'aria-labelledby': 'demo-customized-button',
                }}
                anchorEl={anchorEl}
                open={open}
                onClose={handleClose}
                onClick={e => e.stopPropagation()}
                placement={{
                    anchorOrigin: placement?.anchorOrigin ?? {
                        vertical: 'bottom',
                        horizontal: 'right',
                    },
                    transformOrigin: placement?.transformOrigin ?? {
                        vertical: 'top',
                        horizontal: 'right',
                    },
                }}
                sx={{
                    '.MuiMenu-list': {
                        padding: '4px',
                        borderRadius: '8px',
                    },
                }}
            >
                {buttons.map((btn, index) => {
                    return (
                        <MenuItem
                            onClick={event => {
                                event.stopPropagation();
                                btn.onClick();
                                if (!btn.dontCloseOnClick) handleClose();
                            }}
                            disableRipple
                            key={index}
                            sx={{
                                padding: '8px 12px',
                                gap: '8px',
                            }}
                        >
                            {btn.loading ? (
                                <CircularProgress size={16} />
                            ) : (
                                <SvgIcon
                                    sx={{
                                        width: '16px',
                                        height: '16px',
                                        padding: 0,
                                    }}
                                >
                                    {btn.icon}
                                </SvgIcon>
                            )}

                            <Typography
                                sx={{
                                    fontSize: '14px',
                                    fontWeight: 500,
                                    lineHeight: '16px',
                                    letterSpacing: '-0.4px',
                                }}
                            >
                                {btn.label}
                            </Typography>
                        </MenuItem>
                    );
                })}
            </StyledMenu>
        </div>
    );
}
