import React, { useEffect, useState } from "react";
import "./App.css";


function Settings() {
  const [autoComma, setAutoComma] = useState(false);
  const [allowStart, setAllowStart] = useState(false);

  useEffect(()=>{
    let comma = JSON.parse(window.localStorage.getItem("autoMoveComma"));
    setAutoComma(comma);
    console.log("current auto comma state:", comma);

    let start = JSON.parse(window.localStorage.getItem("allowStartOver"));
    setAllowStart(start);
    console.log("current allow start state:", start);
  }, []);

  function handleMoveChange(newValue) {
    window.localStorage.setItem("autoMoveComma", newValue.target.checked);
    console.log("set auto comma state:", newValue.target.checked);
    setAutoComma(newValue.target.checked);
  }

  function handleStartChange(newValue) {
    window.localStorage.setItem("allowStartOver", newValue.target.checked);
    console.log("set allow start state:", newValue.target.checked);
    setAllowStart(newValue.target.checked);
  }

  return (
    <main>

      <h1>Einstellungen</h1>

      <form>

        <input type="checkbox" id="autoMoveComma" name="autoMoveComma" autoFocus
          onChange={(e) => handleMoveChange(e)}
          checked={autoComma} />
        <label htmlFor="autoMoveComma">Zahlen automatisch ausrichten</label>

        <br/>

        <input type="checkbox" id="allowStartOver" name="allowStartOver"
          onChange={(e) => handleStartChange(e)}
          checked={allowStart}/>
        <label htmlFor="allowStartOver">Fehler ausbessern erlauben</label>

      </form>

    </main>
  );
}

export default Settings;