import type { Lang, T } from "../lib/i18n";
import { Menu } from "./Menu";

interface Props {
  t: T;
  lang: Lang;
  setLang: (l: Lang) => void;
  flowNames: string[];
  currentName: string | null;
  onSelect: (name: string) => void;
  onNew: () => void;
  onDelete: () => void;
  onSave: () => void;
  onRun: () => void;
  dirty: boolean;
  running: boolean;
  closeMode: string;
  setCloseMode: (m: string) => void;
  onOpenSettings: () => void;
  onOpenInspect: () => void;
  onOpenInputs: () => void;
}

export function Header(p: Props) {
  const { t } = p;
  return (
    <header>
      <h1>{t("app_title")}</h1>

      <select value={p.currentName ?? ""} onChange={(e) => p.onSelect(e.target.value)}>
        {p.flowNames.map((n) => (
          <option key={n} value={n}>
            {n}
          </option>
        ))}
      </select>

      <span className="spacer" />

      <span className={"dirty-dot " + (p.dirty ? "on" : "")} title={p.dirty ? t("unsaved") : t("saved")} />
      <button className="secondary" onClick={p.onSave}>
        {t("save")}
      </button>
      <button onClick={p.onRun} disabled={p.running || !p.currentName}>
        {t("run")}
      </button>
      <Menu
        t={t}
        lang={p.lang}
        setLang={p.setLang}
        closeMode={p.closeMode}
        setCloseMode={p.setCloseMode}
        currentName={p.currentName}
        onNew={p.onNew}
        onDelete={p.onDelete}
        onOpenSettings={p.onOpenSettings}
        onOpenInspect={p.onOpenInspect}
        onOpenInputs={p.onOpenInputs}
      />
    </header>
  );
}