/* global React, ReactDOM, Header, Footer, PageAccueil, PageStand, PageCalendrier, PageResultats, PageAcces, PageHistoire, PageBoutique, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakToggle */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/ {
  accent: "gold",
  bg: "creme",
  displayFont: "Cormorant",
}; /*EDITMODE-END*/

function App() {
  const [page, setPage] = React.useState("accueil");
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // apply tweaks
  React.useEffect(() => {
    const root = document.documentElement;
    // accent
    const accents = {
      gold: { c: "#b8893d", d: "#8a6428", s: "#d6b275" },
      red: { c: "#c1272d", d: "#9a1f24", s: "#e57a7e" },
      navy: { c: "#2a4a7f", d: "#1c3358", s: "#6585b3" },
    };
    const a = accents[tweaks.accent] || accents.gold;
    root.style.setProperty("--accent", a.c);
    root.style.setProperty("--accent-deep", a.d);
    root.style.setProperty("--accent-soft", a.s);

    // bg
    root.style.setProperty(
      "--bg",
      tweaks.bg === "blanc" ? "#ffffff" : "#f6f2e8",
    );

    // font
    const fonts = {
      Cormorant: "'Cormorant Garamond', Georgia, serif",
      Fraunces: "'Fraunces', Georgia, serif",
      Bricolage: "'Bricolage Grotesque', Georgia, sans-serif",
    };
    root.style.setProperty(
      "--display",
      fonts[tweaks.displayFont] || fonts.Cormorant,
    );
  }, [tweaks]);

  // scroll to top on nav
  React.useEffect(() => {
    window.scrollTo({ top: 0, behavior: "instant" });
  }, [page]);

  const pages = {
    accueil: <PageAccueil onNav={setPage} />,
    stand: <PageStand onNav={setPage} />,
    calendrier: <PageCalendrier onNav={setPage} />,
    resultats: <PageResultats onNav={setPage} />,
    acces: <PageAcces onNav={setPage} />,
    histoire: <PageHistoire onNav={setPage} />,
    boutique: <PageBoutique onNav={setPage} />,
  };

  return (
    <div data-screen-label={page}>
      <Header current={page} onNav={setPage} />
      <main key={page} className="page-fade-enter page-fade-enter-active">
        {pages[page]}
      </main>
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Couleur signature">
          <TweakRadio
            label="Accent"
            value={tweaks.accent}
            onChange={(v) => setTweak("accent", v)}
            options={[
              { value: "gold", label: "Or" },
              { value: "red", label: "Rouge" },
              { value: "navy", label: "Marine" },
            ]}
          />
        </TweakSection>
        <TweakSection label="Fond">
          <TweakRadio
            label="Papier"
            value={tweaks.bg}
            onChange={(v) => setTweak("bg", v)}
            options={[
              { value: "creme", label: "Crème" },
              { value: "blanc", label: "Blanc" },
            ]}
          />
        </TweakSection>
        <TweakSection label="Typographie">
          <TweakRadio
            label="Display"
            value={tweaks.displayFont}
            onChange={(v) => setTweak("displayFont", v)}
            options={[
              { value: "Cormorant", label: "Cormorant" },
              { value: "Fraunces", label: "Fraunces" },
              { value: "Bricolage", label: "Bricolage" },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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