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

function Home() {
  const [currentTime, setCurrentTime] = useState(0);

  const [state, setState] = useState({
    senderGender: "",
    senderPrename: "",
    senderSurname: "",
    senderStreet: "",
    senderHouse: "",
    senderPlz: "",
    senderPlace: "",
    receiverGender: "",
    receiverPrename: "",
    receiverSurname: "",
    receiverStreet: "",
    receiverHouse: "",
    receiverPlz: "",
    receiverPlace: "",
    subject: "",
    message: "",
  });

  const handleChange = (e) => {
    const value = e.target.value;
    setState({
      ...state,
      [e.target.name]: value,
    });
  };

  const onSubmitClick = (e) => {
    e.preventDefault();
    let opts = {
      state: state
    };
    fetch("api/generate-letter", {
      method: "post",
      body: JSON.stringify(opts),
    }).then((response) => {
      if (response.status !== 200) {
        console.log("An error occured");
      }
    });
  };

  useEffect(() => {
    fetch("/time")
      .then((res) => res.json())
      .then((data) => {
        setCurrentTime(data.time);
      });
  }, []);

  return (
    <div className="App">
      <form onSubmit={onSubmitClick}>
        <div className="letter-adresses">
          <div className="adress-sender">
            <h2>Absender</h2>
            <TextInput
              label="Geschlecht"
              name="senderGender"
              placeholder="Frau"
              onChange={handleChange}
            />
            <TextInput
              label="Vorname"
              name="senderPrename"
              placeholder="Max"
              onChange={handleChange}
            />
            <TextInput
              label="Nachname"
              name="senderSurname"
              placeholder="Muster"
              onChange={handleChange}
            />
            <TextInput
              label="Strasse"
              name="senderStreet"
              placeholder="Musterstrasse"
              onChange={handleChange}
            />
            <TextInput
              label="Hausnummer"
              name="senderHouse"
              placeholder="12"
              onChange={handleChange}
            />
            <TextInput
              label="PLZ"
              name="senderPlz"
              placeholder="1234"
              onChange={handleChange}
            />
            <TextInput
              label="Ort"
              name="senderPlace"
              placeholder="Musterhausen"
              onChange={handleChange}
            />
          </div>
          <div className="adress-receiver">
            <h2>Empfänger</h2>
            <TextInput
              label="Geschlecht"
              name="receiverGender"
              placeholder="Frau"
              onChange={handleChange}
            />
            <TextInput
              label="Vorname"
              name="receiverPrename"
              placeholder="Max"
              onChange={handleChange}
            />
            <TextInput
              label="Nachname"
              name="receiverSurname"
              placeholder="Muster"
              onChange={handleChange}
            />
            <TextInput
              label="Strasse"
              name="receiverStreet"
              placeholder="Musterstrasse"
              onChange={handleChange}
            />
            <TextInput
              label="Hausnummer"
              name="receiverHouse"
              placeholder="12"
              onChange={handleChange}
            />
            <TextInput
              label="PLZ"
              name="receiverPlz"
              placeholder="1234"
              onChange={handleChange}
            />
            <TextInput
              label="Ort"
              name="receiverPlace"
              placeholder="Musterhausen"
              onChange={handleChange}
            />
          </div>
        </div>
        <h2>Nachricht</h2>
        <TextInput
          label="Betreff"
          name="subject"
          placeholder="Betreff"
          onChange={handleChange}
        />
        <TextAreaInput name="message" onChange={handleChange} />
        <SubmitInput value="Brief generieren" />
      </form>
    </div>
  );
}

export default Home;