// Design variant toggle — switches accent palettes across mockup themes.

const { useState: useToggleState, useEffect: useToggleEffect } = React;

function DesignToggle({ variant = "sidebar" }) {
  const [active, setActive] = useToggleState(() =>
    window.DaklabTheme ? window.DaklabTheme.getTheme() : "existing"
  );
  const [activeFont, setActiveFont] = useToggleState(() =>
    window.DaklabTheme ? window.DaklabTheme.getFont() : "figtree"
  );

  useToggleEffect(() => {
    function sync() {
      if (!window.DaklabTheme) return;
      setActive(window.DaklabTheme.getTheme());
      setActiveFont(window.DaklabTheme.getFont());
    }
    window.addEventListener("storage", sync);
    return () => window.removeEventListener("storage", sync);
  }, []);

  function select(id) {
    if (!window.DaklabTheme) return;
    window.DaklabTheme.applyTheme(id);
    setActive(id);
  }

  function selectFont(id) {
    if (!window.DaklabTheme) return;
    window.DaklabTheme.applyFont(id);
    setActiveFont(id);
  }

  const themes = window.DaklabTheme ? window.DaklabTheme.THEMES : [];
  const labels = window.DaklabTheme ? window.DaklabTheme.labels : {};
  const fonts = window.DaklabTheme ? window.DaklabTheme.FONTS : [];
  const fontLabels = window.DaklabTheme ? window.DaklabTheme.fontLabels : {};
  const brandGuideHref = new URL("../brand-guide/index.html", window.location.href).href;

  return (
    <div
      className={`design-toggle design-toggle--${variant}`}
      role="group"
      aria-label="Design variant"
    >
      <a className="design-toggle-brand-guide" href={brandGuideHref}>
        Brand Guide
      </a>
      <span className="design-toggle-label">Color</span>
      <select
        className="design-toggle-select"
        value={active}
        aria-label="Color palette"
        onChange={(e) => select(e.target.value)}
      >
        {themes.map((id) => (
          <option key={id} value={id}>
            {labels[id] || id}
          </option>
        ))}
      </select>
      <span className="design-toggle-label">Font</span>
      <select
        className="design-toggle-select"
        value={activeFont}
        aria-label="Font family"
        onChange={(e) => selectFont(e.target.value)}
      >
        {fonts.map((id) => (
          <option key={id} value={id}>
            {fontLabels[id] || id}
          </option>
        ))}
      </select>
    </div>
  );
}

window.DesignToggle = DesignToggle;