/* Movement Cube — root app */

const { useState, useEffect } = React;

function App() {
  const [program, setProgram] = useState(null);
  const [origin, setOrigin] = useState(null);
  const [t, setTweak] = useTweaks(DEFAULT_HOTSPOTS);

  const COLORS = { reset: "#3aa0e0", rebuild: "#e63a52", restore: "#3aa0e0", prolozone: "#a855f7" };

  function selectProgram(key, originPt) { setProgram(key); setOrigin(originPt || null); }
  function close() { setProgram(null); }

  useEffect(() => {
    function onKey(e) {
      if (e.key === "Escape") close();
      if (e.key === "1") selectProgram("reset");
      if (e.key === "2") selectProgram("rebuild");
      if (e.key === "3") selectProgram("restore");
      if (e.key === "4") selectProgram("prolozone");
    }
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  return (
    <div className="stage dark">
      <div className="bg-lottie" ref={(el) => {
        if (el && !el.__loaded && window.lottie) {
          el.__loaded = true;
          window.lottie.loadAnimation({
            container: el,
            renderer: 'svg',
            loop: true,
            autoplay: true,
            path: 'assets/bg.json',
          });
        }
      }}></div>
      <LogoCube onSelect={selectProgram} focused={!!program} focusId={program} tweaks={t} setTweak={setTweak} />

      <div className={"hint " + (program ? "dim" : "")}>
        {t.showOutlines
          ? "Edit mode: click a quad to select; drag corners to reshape, drag the body to move."
          : "Click a diamond to explore · 1 / 2 / 3 / 4 · Esc to close"}
      </div>

      <Panel programKey={program} onClose={close} originPt={origin} color={program ? COLORS[program] : null} />

      <TweaksPanel>
        <TweakSection label="Hotspot Editor">
          <TweakToggle label="Edit mode (drag corners)"
                       value={t.showOutlines}
                       onChange={(v) => setTweak('showOutlines', v)} />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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