/* global React, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakToggle */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "direction": "Signal",
  "accent": "#FFD60A",
  "display": "Bricolage Grotesque",
  "sharp": false
}/*EDITMODE-END*/;

const DIRECTIONS = {
  "Signal":   { accent: "#FFD60A", display: "Bricolage Grotesque", sharp: false },
  "Asphalte": { accent: "#C8FF3D", display: "Space Grotesk",       sharp: true  },
  "Ambre":    { accent: "#FF9E2C", display: "Archivo",             sharp: false },
};

function deepen(hex, amt) {
  const n = parseInt(hex.slice(1), 16);
  let r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
  r = Math.max(0, r * (1 - amt)); g = Math.max(0, g * (1 - amt)); b = Math.max(0, b * (1 - amt));
  return `#${[r, g, b].map(x => Math.round(x).toString(16).padStart(2, '0')).join('')}`;
}
function softA(hex, a) {
  const n = parseInt(hex.slice(1), 16);
  return `rgba(${(n >> 16) & 255},${(n >> 8) & 255},${n & 255},${a})`;
}

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

  // applying a named direction overrides the individual controls
  const applyDirection = (name) => {
    const d = DIRECTIONS[name];
    setTweak({ direction: name, accent: d.accent, display: d.display, sharp: d.sharp });
  };

  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--accent', t.accent);
    root.style.setProperty('--accent-deep', deepen(t.accent, 0.16));
    root.style.setProperty('--accent-soft', softA(t.accent, 0.14));
    root.style.setProperty('--font-display', `'${t.display}', sans-serif`);
    document.body.classList.toggle('sharp', !!t.sharp);
  }, [t.accent, t.display, t.sharp]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Direction" />
      <TweakRadio
        label="Style"
        value={t.direction}
        options={["Signal", "Asphalte", "Ambre"]}
        onChange={applyDirection}
      />
      <TweakSection label="Personnaliser" />
      <TweakColor
        label="Accent"
        value={t.accent}
        options={["#FFD60A", "#C8FF3D", "#FF9E2C", "#FF5630"]}
        onChange={(v) => setTweak({ accent: v, direction: "—" })}
      />
      <TweakRadio
        label="Police titres"
        value={t.display}
        options={["Bricolage Grotesque", "Space Grotesk", "Archivo"]}
        onChange={(v) => setTweak({ display: v, direction: "—" })}
      />
      <TweakToggle
        label="Angles nets"
        value={t.sharp}
        onChange={(v) => setTweak({ sharp: v })}
      />
    </TweaksPanel>
  );
}

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