// Settings-menu row: "hide developer details". Rendered as a `<SettingsMenu>`
// child (`./SettingsMenu.js`) by each page that has a terminal, the
// per-agent page and the swarm UI, rather than as a prop on the menu: the
// caller owns its row. Both read the same preference (`../prefs.js`), which
// `../terminal/Row.tsx` follows as it changes — mara: "add a setting to not
// display verbose output... like the grey colored debug stuff."
import { useState } from "preact/hooks";
import { getHideDebugPref, setHideDebugPref } from "../prefs.js";

export function HideDebugSetting() {
  const [hideDebug, setHideDebugState] = useState(() => getHideDebugPref());
  return (
    <label class="settings-menu-row">
      <span>hide developer details</span>
      <input
        type="checkbox"
        checked={hideDebug}
        onChange={(e) => {
          const v = (e.target as HTMLInputElement).checked;
          setHideDebugPref(v);
          setHideDebugState(v);
        }}
      />
    </label>
  );
}