import { MenuButton, MenuItem, OverflowMenu, OverflowMenuItem } from "@carbon/react";
import { ChevronDown } from "@carbon/icons-react";
import type { ExportMode } from "../lib/filename";
import { EXPORT_MODE_LABEL, saveExportMode } from "../lib/exportMode";

const MODES: ExportMode[] = ["searchable", "flattened"];

/** "Export PDF" menu for an issued invoice. Choosing a mode also makes it the remembered one. */
export default function ExportButton({ onExport, disabled }: { onExport: (mode: ExportMode) => void; disabled?: boolean }) {
  return (
    <MenuButton label="Export PDF" kind="tertiary" disabled={disabled} menuAlignment="bottom-start">
      {MODES.map((mode) => (
        <MenuItem
          key={mode}
          label={EXPORT_MODE_LABEL[mode]}
          onClick={() => {
            saveExportMode(mode);
            onExport(mode);
          }}
        />
      ))}
    </MenuButton>
  );
}

/** The format the primary "Issue & export" action uses; a small menu next to that button. */
export function ExportModePicker({ mode, onChange, disabled }: { mode: ExportMode; onChange: (mode: ExportMode) => void; disabled?: boolean }) {
  return (
    <OverflowMenu
      aria-label="Choose the PDF format for Issue & export"
      iconDescription={`PDF format: ${EXPORT_MODE_LABEL[mode]}`}
      renderIcon={ChevronDown}
      flipped
      size="lg"
      disabled={disabled}
    >
      {MODES.map((m) => (
        <OverflowMenuItem
          key={m}
          itemText={m === mode ? `${EXPORT_MODE_LABEL[m]} (selected)` : EXPORT_MODE_LABEL[m]}
          onClick={() => {
            saveExportMode(m);
            onChange(m);
          }}
        />
      ))}
    </OverflowMenu>
  );
}