import { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { Redo2, Undo2 } from "lucide-react";
import { dispatch, useKeyScope } from "../../lib/keymap";
import { IconButton } from "./IconButton";

// Reusable undo/redo buttons with Ctrl/Cmd+Z (undo) and Ctrl/Cmd+Y or Ctrl/Cmd+Shift+Z
// (redo) shortcuts. Pairs with useUndoable but takes plain props, so it works with any
// undo source. The chords and the typing guard come from the shared keymap (`undo` scope), so
// they are listed in the help sheet with everything else instead of only living here.
export default function UndoToolbar({
  canUndo,
  canRedo,
  onUndo,
  onRedo,
}: {
  canUndo: boolean;
  canRedo: boolean;
  onUndo: () => void;
  onRedo: () => void;
}) {
  const { t } = useTranslation();
  // Only while a key actually DOES something: the sheet must not advertise Ctrl+Z on a page where
  // nothing has been done yet and the handler returns immediately (E10 review round 1) — the same
  // honest-states gate PlexBrowse uses for its Backspace.
  useKeyScope("undo", canUndo || canRedo);

  useEffect(() => {
    function onKey(e: KeyboardEvent) {
      dispatch(e, "undo", {
        undo: (ev) => {
          if (!canUndo) return;
          ev.preventDefault();
          onUndo();
        },
        redo: (ev) => {
          if (!canRedo) return;
          ev.preventDefault();
          onRedo();
        },
      });
    }
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [canUndo, canRedo, onUndo, onRedo]);

  return (
    <div className="inline-flex items-center gap-1">
      <IconButton variant="outline" onClick={onUndo} disabled={!canUndo} label={t("common.undo")}>
        <Undo2 />
      </IconButton>
      <IconButton variant="outline" onClick={onRedo} disabled={!canRedo} label={t("common.redo")}>
        <Redo2 />
      </IconButton>
    </div>
  );
}