/* ==========================================================
   App: 首頁 (Home)
   ========================================================== */

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "mode": "day",
  "showLanterns": true,
  "showSmoke": true,
  "palette": "default"
}/*EDITMODE-END*/;

const PALETTES = {
  "default": {},
  "azure":   { "--vermillion": "#1f4e6e", "--vermillion-d": "#163a55", "--vermillion-l": "#2c6a93" },
  "moss":    { "--vermillion": "#3d5a3d", "--vermillion-d": "#2b4129", "--vermillion-l": "#557a55" },
  "indigo":  { "--vermillion": "#3a2c5e", "--vermillion-d": "#251a40", "--vermillion-l": "#544182" },
};

const HomeApp = () => {
  const [t, setTweak] = useTweaks(DEFAULTS);

  React.useEffect(() => { document.body.dataset.mode = t.mode; }, [t.mode]);

  React.useEffect(() => {
    const root = document.documentElement;
    ["--vermillion","--vermillion-d","--vermillion-l"].forEach(k => root.style.removeProperty(k));
    const p = PALETTES[t.palette] || {};
    Object.entries(p).forEach(([k,v]) => root.style.setProperty(k, v));
  }, [t.palette]);

  React.useEffect(() => {
    const ls = document.querySelector(".lanterns");
    if (ls) ls.style.display = t.showLanterns ? "" : "none";
  }, [t.showLanterns]);

  return (
    <React.Fragment>
      <Chrome current="home">
        <main className="shell">
          <Hero />
          <Origin />
          <Deity />
          <Events />
          <Charms />
          <Visit />
        </main>
      </Chrome>

      <TweaksPanel title="Tweaks">
        <TweakSection label="氛圍 Mood">
          <TweakRadio
            label="晝夜"
            value={t.mode}
            onChange={v => setTweak("mode", v)}
            options={[
              { value: "day",   label: "晝" },
              { value: "night", label: "夜" },
            ]}
          />
          <TweakToggle label="紅燈籠" value={t.showLanterns}
            onChange={v => setTweak("showLanterns", v)} />
        </TweakSection>

        <TweakSection label="主色調 Palette">
          <TweakSelect
            label="廟色"
            value={t.palette}
            onChange={v => setTweak("palette", v)}
            options={[
              { value: "default", label: "硃紅 · 經典" },
              { value: "azure",   label: "天青 · 雅" },
              { value: "moss",    label: "苔綠 · 隱" },
              { value: "indigo",  label: "靛紫 · 玄" },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<HomeApp />);