import { useEffect, useRef, useState } from "react";
import { api } from "../lib/api";
import type { Lang, T } from "../lib/i18n";

interface Props {
  t: T;
  lang: Lang;
  setLang: (l: Lang) => void;
  closeMode: string;
  setCloseMode: (m: string) => void;
  currentName: string | null;
  onNew: () => void;
  onDelete: () => void;
  onOpenSettings: () => void;
  onOpenInspect: () => void;
  onOpenInputs: () => void;
}

export function Menu(p: Props) {
  const { t } = p;
  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!open) return;
    const onClick = (e: MouseEvent) => {
      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
    };
    const onKey = (e: KeyboardEvent) => e.key === "Escape" && setOpen(false);
    document.addEventListener("mousedown", onClick);
    document.addEventListener("keydown", onKey);
    return () => {
      document.removeEventListener("mousedown", onClick);
      document.removeEventListener("keydown", onKey);
    };
  }, [open]);

  const act = (fn: () => void) => () => {
    setOpen(false);
    fn();
  };

  return (
    <div className="menu-wrap" ref={ref}>
      <button className="secondary" title={t("menu")} onClick={() => setOpen((o) => !o)}>
        ⚙
      </button>
      {open && (
        <div className="menu-popover">
          <div className="menu-section">{t("menu_flow")}</div>
          <button className="menu-item" onClick={act(p.onNew)}>
            {t("new_flow")}
          </button>
          <button className="menu-item" onClick={act(p.onDelete)} disabled={!p.currentName}>
            {t("delete_flow")}
          </button>
          <a
            className="menu-item"
            href={p.currentName ? api.exportUrl(p.currentName) : undefined}
            target="_blank"
            rel="noopener"
            onClick={() => setOpen(false)}
          >
            {t("export")}
          </a>

          <div className="menu-section">{t("menu_run")}</div>
          <label className="menu-item menu-field">
            <span>{t("menu_run")}</span>
            <select value={p.closeMode} onChange={(e) => p.setCloseMode(e.target.value)}>
              <option value="always">{t("close_always")}</option>
              <option value="on_success">{t("close_on_success")}</option>
              <option value="never">{t("close_never")}</option>
            </select>
          </label>
          <button className="menu-item" onClick={act(p.onOpenSettings)}>
            {t("run_settings")}
          </button>
          <button className="menu-item" onClick={act(p.onOpenInputs)}>
            {t("run_params_menu")}
          </button>

          <div className="menu-section">{t("menu_view")}</div>
          <label className="menu-item menu-field">
            <span>{t("language")}</span>
            <select value={p.lang} onChange={(e) => p.setLang(e.target.value as Lang)}>
              <option value="en">English</option>
              <option value="sv">Svenska</option>
            </select>
          </label>

          <div className="menu-section">{t("menu_tools")}</div>
          <button className="menu-item" onClick={act(p.onOpenInspect)}>
            {t("inspect_window")}
          </button>
          <a className="menu-item" href="/wiki" target="_blank" rel="noopener" onClick={() => setOpen(false)}>
            {t("wiki")}
          </a>
        </div>
      )}
    </div>
  );
}