"use client";

import {
  Divider,
  ListItemIcon,
  Menu,
  MenuItem,
} from "@mui/material";
import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
import DeleteOutlineRoundedIcon from "@mui/icons-material/DeleteOutlineRounded";

type PageMenuProps = {
  anchorEl: HTMLElement | null;
  appFontFamily: string;
  labels: {
    viewDetail: string;
    addNewLabel: string;
    createSubPage: string;
    edit: string;
    deletePage: string;
  };
  onClose: () => void;
  onViewDetail: () => void;
  onAddNewLabel: () => void;
  onCreateSubPage: () => void;
  onEdit: () => void;
  onDeletePage: () => void;
};

export function TranslationManagementPageMenu({
  anchorEl,
  appFontFamily,
  labels,
  onClose,
  onViewDetail,
  onAddNewLabel,
  onCreateSubPage,
  onEdit,
  onDeletePage,
}: PageMenuProps) {
  return (
    <Menu
      anchorEl={anchorEl}
      open={Boolean(anchorEl)}
      onClose={onClose}
      anchorOrigin={{
        vertical: "bottom",
        horizontal: "right",
      }}
      transformOrigin={{
        vertical: "top",
        horizontal: "right",
      }}
      slotProps={{
        paper: {
          sx: {
            minWidth: 190,
            mt: 0.5,
            borderRadius: 2,
            fontFamily:
              appFontFamily,
          },
        },
      }}
    >
      <MenuItem onClick={onViewDetail}>
        {labels.viewDetail}
      </MenuItem>

      <MenuItem onClick={onAddNewLabel}>
        {labels.addNewLabel}
      </MenuItem>

      <MenuItem onClick={onCreateSubPage}>
        {labels.createSubPage}
      </MenuItem>

      <Divider />

      <MenuItem onClick={onEdit}>
        {labels.edit}
      </MenuItem>

      <Divider />

      <MenuItem
        onClick={onDeletePage}
        sx={{ color: "error.main" }}
      >
        {labels.deletePage}
      </MenuItem>
    </Menu>
  );
}

type LabelMenuProps = {
  anchorEl: HTMLElement | null;
  appFontFamily: string;
  editLabel: string;
  deleteLabel: string;
  onClose: () => void;
  onEdit: () => void;
  onDelete: () => void;
};

export function TranslationManagementLabelMenu({
  anchorEl,
  appFontFamily,
  editLabel,
  deleteLabel,
  onClose,
  onEdit,
  onDelete,
}: LabelMenuProps) {
  return (
    <Menu
      anchorEl={anchorEl}
      open={Boolean(anchorEl)}
      onClose={onClose}
      anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
      transformOrigin={{ vertical: "top", horizontal: "right" }}
      slotProps={{
        paper: {
          sx: {
            minWidth: 204,
            mt: 0.75,
            borderRadius: "12px",
            border: "1px solid",
            borderColor: "divider",
            boxShadow: 8,
            fontFamily: appFontFamily,
          },
        },
        list: { sx: { p: 0.75 } },
      }}
    >
      <MenuItem onClick={onEdit} sx={{ minHeight: 42, borderRadius: 1.5, gap: 1, fontFamily: appFontFamily }}>
        <ListItemIcon sx={{ minWidth: 24 }}><EditOutlinedIcon fontSize="small" /></ListItemIcon>
        {editLabel}
      </MenuItem>
      <Divider sx={{ my: 0.5 }} />
      <MenuItem
        onClick={onDelete}
        sx={{ minHeight: 42, borderRadius: 1.5, gap: 1, color: "error.main", fontFamily: appFontFamily }}
      >
        <ListItemIcon sx={{ minWidth: 24, color: "inherit" }}><DeleteOutlineRoundedIcon fontSize="small" /></ListItemIcon>
        {deleteLabel}
      </MenuItem>
    </Menu>
  );
}