/* global React, ReactDOM */
const { useEffect, useState } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#0066ff",
  "theme": "light",
  "density": "comfortable",
  "displayFont": "Geist",
  "resumeUrl": "/assets/LeeXinYang_Resume_SG.pdf",
  "linkedinUrl": "https://www.linkedin.com/in/leexinyang1997/"
}/*EDITMODE-END*/;

const ACCENTS = [
  "#0066ff", /* electric blue */
  "#1d1d1f", /* mono ink */
  "#ff3b30", /* warm red */
  "#34c759"  /* mint */
];

const FONTS = [
  "Geist",
  "Helvetica Neue",
  "Söhne Mono"
];

function App() {
  const t = window.useTweaks ? window.useTweaks(TWEAK_DEFAULTS) : { tweaks: TWEAK_DEFAULTS };
  const tweaks = t.tweaks || TWEAK_DEFAULTS;
  const setTweak = t.setTweak;

  /* apply tweaks to :root */
  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--accent", tweaks.accent || "#0066ff");
    root.setAttribute("data-theme", tweaks.theme === "dark" ? "dark" : "light");
    root.style.setProperty(
      "--section-y",
      tweaks.density === "compact"
        ? "clamp(72px, 10vw, 120px)"
        : tweaks.density === "spacious"
        ? "clamp(120px, 18vw, 240px)"
        : "clamp(96px, 14vw, 180px)"
    );
    const font = tweaks.displayFont || "Geist";
    const stack =
      font === "Helvetica Neue"
        ? `"Helvetica Neue", Helvetica, Arial, sans-serif`
        : font === "Söhne Mono"
        ? `"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace`
        : `"Geist", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif`;
    root.style.setProperty("--font-sans", stack);
  }, [tweaks.accent, tweaks.theme, tweaks.density, tweaks.displayFont]);

  window.useReveal && window.useReveal();

  /* progress bar */
  const [progress, setProgress] = useState(0);
  useEffect(() => {
    const onScroll = () => {
      const h = document.documentElement;
      const max = h.scrollHeight - h.clientHeight;
      setProgress(max > 0 ? Math.min(1, h.scrollTop / max) : 0);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const TweaksPanel = window.TweaksPanel;
  const TweakSection = window.TweakSection;
  const TweakColor = window.TweakColor;
  const TweakRadio = window.TweakRadio;
  const TweakSelect = window.TweakSelect;
  const TweakText = window.TweakText;

  const linkProps = {
    resumeUrl: tweaks.resumeUrl,
    linkedinUrl: tweaks.linkedinUrl,
  };

  return (
    <>
      <div
        style={{
          position: "fixed",
          inset: "0 0 auto 0",
          height: 2,
          zIndex: 200,
          pointerEvents: "none"
        }}
      >
        <div
          style={{
            height: "100%",
            width: progress * 100 + "%",
            background: "var(--accent)",
            transition: "width .08s linear"
          }}
        />
      </div>

      <window.Nav {...linkProps} />
      <window.Hero />
      <hr className="hairline wrap-hr" style={{ maxWidth: "var(--max)", margin: "0 auto" }} />
      <window.Pitch />
      <window.Experience />
      <window.Impact />
      <window.Spotlight />
      <window.Skills />
      <window.Education />
      <window.Contact {...linkProps} />
      <window.Footer />

      {TweaksPanel && setTweak && (
        <TweaksPanel>
          <TweakSection label="Color">
            <TweakColor
              label="Accent"
              value={tweaks.accent}
              options={ACCENTS}
              onChange={(v) => setTweak("accent", v)}
            />
            <TweakRadio
              label="Theme"
              value={tweaks.theme}
              options={["light", "dark"]}
              onChange={(v) => setTweak("theme", v)}
            />
          </TweakSection>
          <TweakSection label="Layout">
            <TweakRadio
              label="Density"
              value={tweaks.density}
              options={["compact", "comfortable", "spacious"]}
              onChange={(v) => setTweak("density", v)}
            />
            <TweakSelect
              label="Display font"
              value={tweaks.displayFont}
              options={FONTS}
              onChange={(v) => setTweak("displayFont", v)}
            />
          </TweakSection>
          <TweakSection label="Links">
            {TweakText && (
              <>
                <TweakText
                  label="Resume PDF URL"
                  value={tweaks.resumeUrl}
                  onChange={(v) => setTweak("resumeUrl", v)}
                  placeholder="/assets/LeeXinYang_Resume_SG.pdf"
                />
                <TweakText
                  label="LinkedIn URL"
                  value={tweaks.linkedinUrl}
                  onChange={(v) => setTweak("linkedinUrl", v)}
                />
              </>
            )}
          </TweakSection>
        </TweaksPanel>
      )}
    </>
  );
}

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