import React from "react";
import "./App.css";

function Settings() {
  function handleMoveChange(newValue) {
    window.localStorage.setItem("autoMoveComma", newValue.target.checked);
  }

  function handleStartChange(newValue) {
    window.localStorage.setItem("allowStartOver", newValue.target.checked);
  }

  return (
    <main>

      <h1>Einstellungen</h1>

      <form>

        <input type="checkbox" id="autoMoveComma" name="autoMoveComma" autoFocus
          onChange={(e) => handleMoveChange(e)}
          defaultChecked={JSON.parse(window.localStorage.getItem("autoMoveComma"))} />
        <label htmlFor="autoMoveComma">Zahlen automatisch ausrichten</label>

        <br/>

        <input type="checkbox" id="allowStartOver" name="allowStartOver"
          onChange={(e) => handleStartChange(e)}
          defaultChecked={JSON.parse(window.localStorage.getItem("allowStartOver"))}/>
        <label htmlFor="allowStartOver">Fehler ausbessern erlauben</label>

      </form>

    </main>
  );
}

export default Settings;