/* VoxiConf — Tweaks: 3 варианта стиля + акцент + плотность */
const { useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakSelect } = window;

const VOX_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "midnight",
  "accent": "#2fd4c7",
  "radius": "обычные"
}/*EDITMODE-END*/;

const THEME_LABELS = { graphite: "Графит", midnight: "Полночь", steel: "Сталь" };

// each theme has a tasteful default accent
const THEME_ACCENTS = {
  graphite: "#4d7cfe",
  midnight: "#2fd4c7",
  steel: "#c9a25e"
};

const ACCENTS = ["#4d7cfe", "#2fd4c7", "#a47cff", "#c9a25e", "#e8633a"];

function accentPair(hex) {
  // lighten for the -2 variant
  const n = parseInt(hex.slice(1), 16);
  let r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
  r = Math.round(r + (255 - r) * 0.28);
  g = Math.round(g + (255 - g) * 0.28);
  b = Math.round(b + (255 - b) * 0.28);
  return "#" + [r, g, b].map(x => x.toString(16).padStart(2, "0")).join("");
}
function rgba(hex, a) {
  const n = parseInt(hex.slice(1), 16);
  return `rgba(${(n >> 16) & 255},${(n >> 8) & 255},${n & 255},${a})`;
}
function luminance(hex) {
  const n = parseInt(hex.slice(1), 16);
  const r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
  return (0.299 * r + 0.587 * g + 0.114 * b) / 255;
}

const RADII = { "острые": ["6px", "10px", "14px"], "обычные": ["10px", "16px", "22px"], "мягкие": ["14px", "22px", "30px"] };

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

  React.useEffect(() => {
    const root = document.documentElement;
    root.setAttribute("data-theme", t.theme);

    const acc = t.accent;
    root.style.setProperty("--accent", acc);
    root.style.setProperty("--accent-2", accentPair(acc));
    root.style.setProperty("--accent-ink", luminance(acc) > 0.62 ? "#15110a" : "#ffffff");
    root.style.setProperty("--accent-glow", rgba(acc, 0.28));
    root.style.setProperty("--accent-soft", rgba(acc, 0.12));

    const r = RADII[t.radius] || RADII["обычные"];
    root.style.setProperty("--radius-s", r[0]);
    root.style.setProperty("--radius", r[1]);
    root.style.setProperty("--radius-l", r[2]);
  }, [t.theme, t.accent, t.radius]);

  function setTheme(theme) {
    // switching theme resets accent to that theme's signature color
    setTweak({ theme: theme, accent: THEME_ACCENTS[theme] });
  }

  return (
    <TweaksPanel>
      <TweakSection label="Стиль" />
      <TweakRadio
        label="Тема"
        value={t.theme}
        options={[
          { value: "graphite", label: "Графит" },
          { value: "midnight", label: "Полночь" },
          { value: "steel", label: "Сталь" }
        ]}
        onChange={setTheme}
      />
      <TweakColor
        label="Акцент"
        value={t.accent}
        options={ACCENTS}
        onChange={(v) => setTweak("accent", v)}
      />
      <TweakSection label="Форма" />
      <TweakRadio
        label="Скругления"
        value={t.radius}
        options={["острые", "обычные", "мягкие"]}
        onChange={(v) => setTweak("radius", v)}
      />
    </TweaksPanel>
  );
}

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