/* Tweaks — AVXLab Market Intelligence */
const { useEffect } = React;

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "showDiag": true,
  "darkText": false,
  "signalColor": "#E32213",
  "tealColor": "#4A7D7A",
  "paperColor": "#E9DCBE",
  "bg1": "assets/bg_01.svg",
  "bg2": "assets/bg_02.svg",
  "bg3": "assets/bg_03.svg",
  "bg4": "assets/bg_04.svg",
  "bg5": "assets/bg_05.svg"
}/*EDITMODE-END*/;

function App(){
  const [t, set] = window.useTweaks(DEFAULTS);

  useEffect(() => {
    const root = document.documentElement;
    root.classList.toggle("no-diag", !t.showDiag);
    root.classList.toggle("text-dark", !!t.darkText);
    root.style.setProperty("--signal", t.signalColor);
    root.style.setProperty("--teal", t.tealColor);
    root.style.setProperty("--paper", t.paperColor);

    // backgrounds
    const bgs = [t.bg1, t.bg2, t.bg3, t.bg4, t.bg5];
    document.querySelectorAll(".chapter-opener__bg").forEach((el, i) => {
      if (bgs[i]) el.style.backgroundImage = `url('${bgs[i]}')`;
    });
  }, [t]);

  const { TweaksPanel, TweakSection, TweakToggle, TweakColor, TweakSelect } = window;

  const bgOptions = [
    { value: "assets/bg_01.svg", label: "01 · Horizonte" },
    { value: "assets/bg_02.svg", label: "02 · Rede" },
    { value: "assets/bg_03.svg", label: "03 · Ondas" },
    { value: "assets/bg_04.svg", label: "04 · Globo" },
    { value: "assets/bg_05.svg", label: "05 · Eclipse" },
  ];

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Aparência">
        <TweakToggle label="Diagonal vermelha" value={t.showDiag} onChange={v => set({showDiag: v})} />
        <TweakToggle label="Páginas de texto em preto" value={t.darkText} onChange={v => set({darkText: v})} />
      </TweakSection>
      <TweakSection title="Paleta">
        <TweakColor label="Sinal (vermelho)" value={t.signalColor} onChange={v => set({signalColor: v})} />
        <TweakColor label="Teal" value={t.tealColor} onChange={v => set({tealColor: v})} />
        <TweakColor label="Papel (bege)" value={t.paperColor} onChange={v => set({paperColor: v})} />
      </TweakSection>
      <TweakSection title="Fundos dos capítulos">
        <TweakSelect label="Cap. 01 · Nosso Momento" value={t.bg1} onChange={v => set({bg1: v})} options={bgOptions} />
        <TweakSelect label="Cap. 02 · Ecossistema" value={t.bg2} onChange={v => set({bg2: v})} options={bgOptions} />
        <TweakSelect label="Cap. 03 · Experiência" value={t.bg3} onChange={v => set({bg3: v})} options={bgOptions} />
        <TweakSelect label="Cap. 04 · Panorama" value={t.bg4} onChange={v => set({bg4: v})} options={bgOptions} />
        <TweakSelect label="Cap. 05 · Tempestade" value={t.bg5} onChange={v => set({bg5: v})} options={bgOptions} />
      </TweakSection>
    </TweaksPanel>
  );
}

const root = document.createElement("div");
document.body.appendChild(root);
ReactDOM.createRoot(root).render(<App/>);