"use client";

import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";
import { alpha, useTheme, type PaletteMode } from "@mui/material/styles";

export const EXPORT_FORMATS = ["CSV", "XLSX", "Image"] as const;

export type ExportFormat = (typeof EXPORT_FORMATS)[number];

export function getExportMenuPaperSx(mode: PaletteMode) {
  return {
    mt: 0.75,
    minWidth: 118,
    borderRadius: "12px",
    overflow: "hidden",
    border:
      mode === "dark"
        ? `1px solid ${alpha("#ffffff", 0.08)}`
        : "1px solid #f5f5f5",
    boxShadow:
      mode === "dark"
        ? "0 18px 40px rgba(0,0,0,0.42)"
        : "0 0 5.3px rgba(0,0,0,0.1)",
    bgcolor: mode === "dark" ? "#101828" : "#ffffff",
    backgroundImage: "none",
  };
}

type ExportFormatMenuProps = {
  anchorEl: HTMLElement | null;
  open: boolean;
  onClose: () => void;
  onSelect: (format: ExportFormat) => void;
};

export function ExportFormatMenu({
  anchorEl,
  open,
  onClose,
  onSelect,
}: ExportFormatMenuProps) {
  const theme = useTheme();
  const isDark = theme.palette.mode === "dark";

  return (
    <Menu
      anchorEl={anchorEl}
      open={open}
      onClose={onClose}
      anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
      transformOrigin={{ vertical: "top", horizontal: "right" }}
      slotProps={{
        paper: {
          sx: getExportMenuPaperSx(theme.palette.mode),
        },
      }}
    >
      {EXPORT_FORMATS.map((format) => (
        <MenuItem
          key={format}
          onClick={() => onSelect(format)}
          sx={{
            minHeight: 40,
            height: 40,
            px: "22px",
            py: 0,
            fontSize: 14,
            fontWeight: 500,
            lineHeight: "20px",
            color: isDark ? "#f9fafb" : "#414651",
            "&:hover": {
              bgcolor: isDark ? alpha("#ffffff", 0.06) : "#f9fafb",
            },
          }}
        >
          {format}
        </MenuItem>
      ))}
    </Menu>
  );
}