/* global React */

function TweaksPanel_App() {
  const Panel = window.TweaksPanel;
  const Section = window.TweakSection;
  const Toggle = window.TweakToggle;
  if (!Panel || !window.useTweaks) return null;

  const [t, setTweak] = window.useTweaks(window.TWEAK_DEFAULTS);

  return (
    <Panel>
      <Section title="Mapa">
        <Toggle label="Pokazuj trasy na mapie"
                value={t.showPaths}
                onChange={(v) => setTweak('showPaths', v)} />
        <Toggle label="Etykiety miast"
                value={t.showCityLabels}
                onChange={(v) => setTweak('showCityLabels', v)} />
        <Toggle label="Obrys Polski"
                value={t.showOutline}
                onChange={(v) => setTweak('showOutline', v)} />
      </Section>
      <Section title="Lista pociągów">
        <Toggle label="Pokazuj siatkę miejsc"
                value={t.seatGrid}
                onChange={(v) => setTweak('seatGrid', v)} />
        <Toggle label="Kompaktowy widok"
                value={t.compact}
                onChange={(v) => setTweak('compact', v)} />
      </Section>
    </Panel>
  );
}

window.TweaksPanel_App = TweaksPanel_App;