// SATS — Tweaks panel app
// Mounts a Tweaks panel that lets the user adjust the prototype live.

const { useEffect } = React;

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

  // Apply tweaks to the running site
  useEffect(() => { window.SATS && window.SATS.setAccent(t.accent); }, [t.accent]);
  useEffect(() => { window.SATS && window.SATS.setMotion(t.motion); }, [t.motion]);
  useEffect(() => { window.SATS && window.SATS.setMesh(t.mesh); }, [t.mesh]);
  useEffect(() => {
    document.documentElement.style.setProperty('--decrypt-duration', t.decryptSpeed + 'ms');
  }, [t.decryptSpeed]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Identidade" />
      <TweakColor
        label="Cor de acento"
        value={t.accent}
        options={['#FF8C00', '#F5C518', '#22D3EE', '#A78BFA']}
        onChange={(v) => setTweak('accent', v)}
      />

      <TweakSection label="Movimento" />
      <TweakSlider
        label="Intensidade"
        value={t.motion}
        min={0}
        max={1.5}
        step={0.1}
        onChange={(v) => setTweak('motion', v)}
      />
      <TweakSlider
        label="Velocidade do decrypt"
        value={t.decryptSpeed}
        min={400}
        max={2000}
        step={100}
        unit="ms"
        onChange={(v) => setTweak('decryptSpeed', v)}
      />
      <TweakToggle
        label="Rede de nós (hero)"
        value={t.mesh}
        onChange={(v) => setTweak('mesh', v)}
      />

      <TweakSection label="Idioma" />
      <TweakRadio
        label="Forçar idioma"
        value={(window.SATS && window.SATS.getLang()) || 'pt'}
        options={['pt', 'en', 'es']}
        onChange={(v) => window.SATS && window.SATS.setLang(v)}
      />
    </TweaksPanel>
  );
}

// Mount
const __satsTweaksMount = document.createElement('div');
document.body.appendChild(__satsTweaksMount);
ReactDOM.createRoot(__satsTweaksMount).render(<SatsTweaks />);