/* CIRG website — accessibility widget (WCAG helpers). window.AccessibilityWidget */

const A11Y_DEFAULT = { font: 0, contrast: "normal", spacing: false, underline: false };

function applyA11y(s) {
  const r = document.documentElement;
  r.style.zoom = s.font === 2 ? "1.25" : s.font === 1 ? "1.12" : "";
  r.classList.toggle("a11y-contrast", s.contrast === "high");
  r.classList.toggle("a11y-grayscale", s.contrast === "gray");
  r.classList.toggle("a11y-spacing", !!s.spacing);
  r.classList.toggle("a11y-underline", !!s.underline);
}

function AccessibilityWidget({ t }) {
  const a = t.a11y;
  const [open, setOpen] = React.useState(false);
  const [s, setS] = React.useState(() => {
    try { return Object.assign({}, A11Y_DEFAULT, JSON.parse(localStorage.getItem("cirg-a11y")) || {}); }
    catch (e) { return Object.assign({}, A11Y_DEFAULT); }
  });
  React.useEffect(() => {
    applyA11y(s);
    try { localStorage.setItem("cirg-a11y", JSON.stringify(s)); } catch (e) {}
  }, [s]);
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });

  const set = (k, v) => setS((p) => Object.assign({}, p, { [k]: v }));
  const reset = () => setS(Object.assign({}, A11Y_DEFAULT));

  return (
    <>
      <button className={"a11y-fab" + (open ? " open" : "")} aria-expanded={open} onClick={() => setOpen((o) => !o)}>
        <Icon name="eye" size={19} />
        <span className="a11y-fab-label">{a.open}</span>
      </button>
      {open ? (
        <div className="a11y-panel" role="dialog" aria-label={a.title}>
          <div className="a11y-head">
            <span className="a11y-title"><Icon name="eye" size={18} /> {a.title}</span>
            <button className="a11y-close" aria-label={a.close} onClick={() => setOpen(false)}><Icon name="x" size={16} /></button>
          </div>

          <div className="a11y-row">
            <span className="a11y-label">{a.fontSize}</span>
            <div className="a11y-seg" role="group" aria-label={a.fontSize}>
              {[0, 1, 2].map((n) => (
                <button key={n} className={s.font === n ? "on" : ""} aria-pressed={s.font === n} onClick={() => set("font", n)} style={{ fontSize: 13 + n * 3 }}>A</button>
              ))}
            </div>
          </div>

          <div className="a11y-row">
            <span className="a11y-label">{a.contrast}</span>
            <div className="a11y-seg" role="group" aria-label={a.contrast}>
              {[["normal", a.cNormal], ["high", a.cHigh], ["gray", a.cGray]].map(([v, l]) => (
                <button key={v} className={s.contrast === v ? "on" : ""} aria-pressed={s.contrast === v} onClick={() => set("contrast", v)}>{l}</button>
              ))}
            </div>
          </div>

          <button className={"a11y-toggle" + (s.spacing ? " on" : "")} aria-pressed={s.spacing} onClick={() => set("spacing", !s.spacing)}>
            <Icon name="text-quote" size={17} /> <span>{a.spacing}</span>
            <span className="a11y-switch" aria-hidden="true"></span>
          </button>
          <button className={"a11y-toggle" + (s.underline ? " on" : "")} aria-pressed={s.underline} onClick={() => set("underline", !s.underline)}>
            <Icon name="underline" size={17} /> <span>{a.underline}</span>
            <span className="a11y-switch" aria-hidden="true"></span>
          </button>

          <button className="btn btn-secondary btn-sm a11y-reset" onClick={reset}><Icon name="rotate-ccw" size={14} /> {a.reset}</button>
        </div>
      ) : null}
    </>
  );
}

Object.assign(window, { AccessibilityWidget });