// Tweaks — in-page design controls for the prototype.
// Mounted on its own root; values published to window.REPORT_TWEAKS and
// broadcast via the 'report-tweaks' event so any screen can subscribe.

const REPORT_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "flowShape": "single"
}/*EDITMODE-END*/;

function ReportTweaks() {
  const [t, setTweak] = useTweaks(REPORT_TWEAK_DEFAULTS);
  React.useEffect(() => {
    window.REPORT_TWEAKS = t;
    window.dispatchEvent(new Event('report-tweaks'));
  }, [t]);
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Expense Report" />
      <TweakRadio label="Flow shape" value={t.flowShape}
        options={[
          { value: 'single', label: 'Single screen' },
          { value: 'wizard', label: 'Wizard' },
        ]}
        onChange={(v) => setTweak('flowShape', v)} />
    </TweaksPanel>
  );
}

(function mountReportTweaks() {
  const el = document.createElement('div');
  el.id = 'report-tweaks-root';
  document.body.appendChild(el);
  ReactDOM.createRoot(el).render(<ReportTweaks />);
})();