/* KOMORE Story — tweaks panel */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroTitle": 46,
  "bodySize": 25,
  "bodyWidth": 84,
  "heroWidth": 84
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    const s = document.documentElement.style;
    s.setProperty('--hero-fs', t.heroTitle + 'px');
    s.setProperty('--article-fs', t.bodySize + 'px');
    s.setProperty('--read-w', t.bodyWidth + 'em');
    s.setProperty('--hero-w', t.heroWidth + 'em');
  }, [t]);

  return (
    <TweaksPanel>
      <TweakSection label="トップセクション" />
      <TweakSlider label="見出しの文字サイズ" value={t.heroTitle} min={26} max={64} unit="px"
                   onChange={(v) => setTweak('heroTitle', v)} />
      <TweakSlider label="見出しの行幅" value={t.heroWidth} min={12} max={100} step={1} unit="em"
                   onChange={(v) => setTweak('heroWidth', v)} />
      <TweakSection label="本文" />
      <TweakSlider label="本文の文字サイズ" value={t.bodySize} min={14} max={30} unit="px"
                   onChange={(v) => setTweak('bodySize', v)} />
      <TweakSlider label="本文の行幅" value={t.bodyWidth} min={26} max={110} step={1} unit="em"
                   onChange={(v) => setTweak('bodyWidth', v)} />
    </TweaksPanel>
  );
}

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