import Iconify from '@/components/Iconify';
import MenuPopover from './MenuPopover';
import { IconButton, MenuItem } from '@mui/material';
import { useEffect, useState } from 'react';

// ----------------------------------------------------------------------

type Props = {
  actions: React.ReactNode;
};

export default function MoreMenu({ actions }: Props) {
    const [open, setOpen] = useState<HTMLElement | null>(null);

    // Close menu popover
    useEffect(() => {
        setOpen(null);
    }, [actions])

    const handleOpen = (event: React.MouseEvent<HTMLElement>) => {
        setOpen(event.currentTarget);
    };

    const handleClose = () => {
        setOpen(null);
    };

    return (
        <>
            <IconButton onClick={handleOpen}>
                <Iconify icon={'eva:more-vertical-fill'} width={20} height={20} />
            </IconButton>

            <MenuPopover
                open={Boolean(open)}
                anchorEl={open}
                onClose={handleClose}
                anchorOrigin={{ vertical: 'top', horizontal: 'left' }}
                transformOrigin={{ vertical: 'top', horizontal: 'right' }}
                arrow="right-top"
                sx={{
                    mt: -1,
                    width: 'auto',
                    minWidth: 160,
                    '& .MuiMenuItem-root': {
                        px: 1,
                        typography: 'body2',
                        borderRadius: 0.75,
                        '& svg': { mr: 2, width: 20, height: 20 },
                    },
                }}
            >
                {actions}
            </MenuPopover>

        </>
    );
}