import { useState } from 'react';

import classes from './Form.module.css';
import Preferences from './Preferences';

function Form() {
  const [wantsNewProdInfo, setWantsNewProdInfo] = useState(false);
  const [wantsProdUpdateInfo, setWantsProdUpdateInfo] = useState(false);

  function updateProdInfoHandler(selection) {
    // Używanie jednej współdzielonej funkcji do obsługi aktualizacji jest opcjonalne.
    // Możesz też użyć dwóch odrębnych funkcji przekazywanych do Preferences jako propy.
    if (selection === 'pref-new') {
      setWantsNewProdInfo((prevPref) => !prevPref);
    } else {
      setWantsProdUpdateInfo((prevPref) => !prevPref);
    }
  }

  function reset() {
    setWantsNewProdInfo(false);
    setWantsProdUpdateInfo(false);
  }

  function submitHandler(event) {
    event.preventDefault();
    // Tu możesz używać wartości stanu
    reset();
  }

  return (
    <form className={classes.form} onSubmit={submitHandler}>
      <div className={classes.formControl}>
        <label htmlFor="email">Adres e-mail</label>
        <input type="email" id="email" />
      </div>
      <Preferences
        newProdInfo={wantsNewProdInfo}
        prodUpdateInfo={wantsProdUpdateInfo}
        onUpdateInfo={updateProdInfoHandler}
      />
      <button>Wyślij</button>
    </form>
  );
}

export default Form;
