import { ThemeProvider } from "@emotion/react";
import Divider from "@mui/material/Divider";
import MaterialMenu from "@mui/material/Menu";
import MenuList from "@mui/material/MenuList";
import MenuItem from "@mui/material/MenuItem";
import ListItemText from "@mui/material/ListItemText";
import ListItemIcon from "@mui/material/ListItemIcon";
import { useMenuStore } from "@core/Store/Menu.Store";
import turnosXpressTheme from "@core/app/theme/turnosXpress";

export default function Menu() {
    const menu = useMenuStore();

    const handleClose = () => {
        menu.hide();
    };

    return (
        menu.visible && (
            <ThemeProvider theme={turnosXpressTheme}>
                <MaterialMenu
                    id="tx-menu"
                    aria-labelledby="button-menu"
                    anchorEl={menu.anchorEl}
                    open={menu.visible}
                    onClose={handleClose}
                    anchorOrigin={{
                        vertical: "top",
                        horizontal: "right",
                    }}
                    transformOrigin={{
                        vertical: "top",
                        horizontal: "right",
                    }}
                >
                    <MenuList dense>
                        {menu.items.map((item, index) =>
                            item.divider ? (
                                <Divider key={`divider-${index}`} />
                            ) : (
                                <MenuItem
                                    key={item.text}
                                    onClick={item.onClick}
                                    sx={{ height: "40px" }}
                                >
                                    <ListItemIcon>{item.icon}</ListItemIcon>
                                    <ListItemText>{item.text}</ListItemText>
                                </MenuItem>
                            )
                        )}
                    </MenuList>
                </MaterialMenu>
            </ThemeProvider>
        )
    );
}
