"use client";
import {
Fragment,
useState,
type MouseEvent,
type ReactNode,
} from "react";
import Box from "@mui/material/Box";
import ButtonBase from "@mui/material/ButtonBase";
import Divider from "@mui/material/Divider";
import ListItemIcon from "@mui/material/ListItemIcon";
import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";
import Typography from "@mui/material/Typography";
import {
alpha,
useTheme,
type PaletteMode,
} from "@mui/material/styles";
import { useAppLanguage } from "@/components/providers/app-language-provider";
import AddIssueDialog from "./add-issue-dialog/add-issue-dialog";
import {
AddIssueIcon,
ChevronDownIcon,
ChevronRightIcon,
PlusThinIcon,
RequestMeetingIcon,
UploadTrayIcon,
} from "./plenary-icons";
import {
normalizePlenaryLanguage,
plenaryText,
} from "../plenary-i18n";
type PlenaryActionMenuItem = {
label: string;
icon?: ReactNode;
disabled?: boolean;
dividerAbove?: boolean;
showChevron?: boolean;
onClick?: () => void;
};
type PlenaryActionMenuButtonProps = {
label: string;
startIcon: ReactNode;
items: PlenaryActionMenuItem[];
variant?: "outline" | "filled";
menuAlign?: "left" | "right";
};
export function PlenaryActions() {
const theme = useTheme();
const { language } = useAppLanguage();
const currentLanguage =
normalizePlenaryLanguage(language);
const text = plenaryText[currentLanguage];
const [openAddIssue, setOpenAddIssue] =
useState(false);
const exportItems: PlenaryActionMenuItem[] = [
{
label: text.csv,
},
{
label: text.xlsx,
},
{
label: text.image,
},
];
const newItems: PlenaryActionMenuItem[] = [
{
label: text.addIssue,
icon: (
),
showChevron: true,
onClick: () => {
setOpenAddIssue(true);
},
},
{
label: text.requestMeeting,
icon: (
),
dividerAbove: true,
showChevron: true,
},
];
function handleCloseAddIssue() {
setOpenAddIssue(false);
}
return (
<>
}
items={exportItems}
/>
}
items={newItems}
variant="filled"
menuAlign="right"
/>
{text.lastUpdated}:
{" "}
{text.lastUpdatedDate}
);
}
function getMenuPaperSx(mode: PaletteMode) {
return {
mt: 0.75,
borderRadius: "14px",
overflow: "hidden",
border:
mode === "dark"
? "1px solid rgba(255,255,255,0.08)"
: "1px solid rgba(15,23,42,0.08)",
boxShadow:
mode === "dark"
? "0 18px 40px rgba(0,0,0,0.42)"
: "0 14px 34px rgba(15,23,42,0.12)",
backgroundImage: "none",
};
}
function PlenaryActionMenuButton({
label,
startIcon,
items,
variant = "outline",
menuAlign = "left",
}: PlenaryActionMenuButtonProps) {
const theme = useTheme();
const [anchorEl, setAnchorEl] =
useState(null);
const open = Boolean(anchorEl);
const isFilled = variant === "filled";
const isMenuRightAligned =
menuAlign === "right";
function handleOpen(
event: MouseEvent,
) {
setAnchorEl(event.currentTarget);
}
function handleClose() {
setAnchorEl(null);
}
return (
<>
{startIcon}
{label}
);
}