// Novatech Digital — Tweaks
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "onyx",
  "logo": "wordmark",
  "showCaret": true
}/*EDITMODE-END*/;

function TweaksApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    document.documentElement.setAttribute("data-theme", t.theme);
    localStorage.setItem("nt_theme", t.theme);
  }, [t.theme]);

  React.useEffect(() => {
    document.documentElement.setAttribute("data-logo", t.logo);
    localStorage.setItem("nt_logo", t.logo);
    document.querySelectorAll("[data-logo-variant]").forEach((el) => {
      el.style.display = el.dataset.logoVariant === t.logo ? "" : "none";
    });
  }, [t.logo]);

  React.useEffect(() => {
    document.querySelectorAll(".caret").forEach((el) => {
      el.style.display = t.showCaret ? "" : "none";
    });
  }, [t.showCaret]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Палітра" />
      <TweakRadio
        label="Тема"
        value={t.theme}
        options={["onyx", "cyber", "daylight"]}
        onChange={(v) => setTweak("theme", v)}
      />

      <TweakSection label="Логотип" />
      <TweakRadio
        label="Варіант"
        value={t.logo}
        options={["wordmark", "n-mark", "orbit"]}
        onChange={(v) => setTweak("logo", v)}
      />

      <TweakSection label="Деталі" />
      <TweakToggle
        label="Курсор (caret)"
        value={t.showCaret}
        onChange={(v) => setTweak("showCaret", v)}
      />
    </TweaksPanel>
  );
}

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