// Tweaks panel app
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#c4b5fd", "#7dd3fc", "#fda4af", "#fde68a"],
  "shape": "icosa",
  "material": "wire",
  "cursor": "blob",
  "grain": 0.18
}/*EDITMODE-END*/;

function applyPalette(p){
  document.documentElement.style.setProperty('--c1', p[0]);
  document.documentElement.style.setProperty('--c2', p[1]);
  document.documentElement.style.setProperty('--c3', p[2]);
  document.documentElement.style.setProperty('--c4', p[3]);
  if (window.__refreshSceneColors) window.__refreshSceneColors();
}
function applyCursor(c){
  document.body.classList.remove('cur-blob','cur-cross','cur-classic');
  document.body.classList.add('cur-' + c);
}
function applyGrain(g){
  document.documentElement.style.setProperty('--grain', String(g));
}

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

  React.useEffect(() => { applyPalette(t.palette); }, [t.palette]);
  React.useEffect(() => { applyCursor(t.cursor); }, [t.cursor]);
  React.useEffect(() => { applyGrain(t.grain); }, [t.grain]);
  React.useEffect(() => {
    if (window.__rebuildHeroShape) window.__rebuildHeroShape(t.shape, t.material);
  }, [t.shape, t.material]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Palette" />
      <TweakColor
        label="Candy"
        value={t.palette}
        options={[
          ["#c4b5fd","#7dd3fc","#fda4af","#fde68a"],
          ["#a5f3fc","#fbcfe8","#bbf7d0","#fde68a"],
          ["#f0abfc","#a78bfa","#22d3ee","#facc15"],
          ["#fb7185","#fb923c","#facc15","#a3e635"],
          ["#86efac","#fcd34d","#fda4af","#c4b5fd"]
        ]}
        onChange={(v) => setTweak('palette', v)}
      />

      <TweakSection label="3D object" />
      <TweakRadio
        label="Shape"
        value={t.shape}
        options={['sphere','torus','icosa','box']}
        onChange={(v) => setTweak('shape', v)}
      />
      <TweakRadio
        label="Material"
        value={t.material}
        options={['glossy','matte','metal','wire']}
        onChange={(v) => setTweak('material', v)}
      />

      <TweakSection label="Cursor" />
      <TweakRadio
        label="Style"
        value={t.cursor}
        options={['blob','cross','classic']}
        onChange={(v) => setTweak('cursor', v)}
      />

      <TweakSection label="Atmosphere" />
      <TweakSlider
        label="Grain"
        value={t.grain}
        min={0} max={0.6} step={0.02}
        onChange={(v) => setTweak('grain', v)}
      />
    </TweaksPanel>
  );
}

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