import React from "react";
import { useState } from "react/cjs/react.development";
import "../../App.css";
import "../Input.css";
import Footer from "../../Footer";
import InputField from "../InputField";
import SubmitField from "../SubmitField";
import { authFetch } from "../../auth/AuthProvider";

export default function Umfrage() {
  const [age, setAge] = useState("");
  const [gender, setGender] = useState("");
  const [education, setEducation] = useState("");
  const [skills, setSkills] = useState("");

  let surveyIsValid = true;
  let errorMessage = ""

  const onSubmitClick = (e) => {
    e.preventDefault();
    let opts = {
      age: age,
      gender: gender,
      education: education,
      skills: skills,
    };

    if (!Number(age)) {
      errorMessage += "age is not a number\n"
      surveyIsValid = false;
    }
    if (gender === "DEFAULT" || gender === "") {
      errorMessage += "choose gender\n"
      surveyIsValid = false;
    }
    if (education === "DEFAULT" || education === "") {
      errorMessage += "choose edu\n"
      surveyIsValid = false;
    }
    if (skills === "DEFAULT" || skills === "") {
      errorMessage += "choose skills\n"
      surveyIsValid = false;
    }

    if (surveyIsValid === true) {
      console.log(opts);

      authFetch("/umfrage", {
        method: "post",
        body: JSON.stringify(opts),
      });
    }
    else {
      console.log(errorMessage);
    }
  };

  const handleAgeChange = (e) => {
    setAge(e.target.value);
  };

  const handleGenderChange = (e) => {
    setGender(e.target.value);
  };

  const handleEducationChange = (e) => {
    setEducation(e.target.value);
  };

  const handleSkillsChange = (e) => {
    setSkills(e.target.value);
  };

  return (
    <>
      <div className="sitePage">
        <h1> Umfrage</h1>
        <p>
          Damit ich etwas über die Studienteilnehmenden erfahre, möchte ich hier
          eine kurze Erhebung einiger wichtiger Daten machen. Die Daten werden
          natürlich nicht genauer verfolgt und die Auswertung der biometrischen
          Verhaltensmerkmale geschieht unabhängig davon. Konkret bedeutet das,
          dass ich deine Angaben nicht mit den Informationen aus den
          Verhaltensmerkmalen zusammenfliessen lasse.
        </p>
        <p>
          Die Umfrage dauert nur ca. 2 Minuten und nach der ersten Befragung
          musst du diese auch nicht mehr ausfüllen, da ich dann eine ungefähre
          Auswertung machen kann, wie sich die Studienteilnehmenden aufteilen.
          So kann es für mich beispielsweise relevant sein, wenn sämtliche
          Teilnehmenden ein sehr gutes Informatikverständnis haben.
        </p>
        <form id="umfrage">
          <InputField
            InputType="number"
            onChange={handleAgeChange}
            className="input-field"
            LabelName="Wie alt bist du? (Alter in Jahren)"
          />
          <div className="input-field">
            <label htmlFor="gender">Welches Geschlecht hast du?</label> <br />
            <select
              name="gender"
              id="gender"
              onChange={handleGenderChange}
              defaultValue="DEFAULT"
            >
              <option disabled value="DEFAULT">
                -- Bitte wähle etwas aus --{" "}
              </option>
              <option value="male">Männlich</option>
              <option value="female">Weiblich</option>
              <option value="divers">divers</option>
              <option value="sex_na">Keine Angabe</option>
            </select>
          </div>
          <div className="input-field">
            <label htmlFor="education">
              Welches ist deine höchste abgeschlossene Ausbildung?
            </label>
            <br />
            <select
              name="education"
              id="education"
              onChange={handleEducationChange}
              defaultValue="DEFAULT"
            >
              <option disabled value="DEFAULT">
                -- Bitte wähle deine Ausbildung aus --
              </option>
              <option>Berufslehre</option>
              <option>Gymnasiale Maturität</option>
              <option>Berufsmatura</option>
              <option>Bachelor</option>
              <option>Master oder höher</option>
              <option>Keine Angabe</option>
            </select>
          </div>
          <div className="input-field">
            <label htmlFor="itskills">
              Wie schätzt du deine Kompetenzen im Bereich der Informatik als
              Anwender ein?
            </label>
            <br />
            <select
              name="itskills"
              id="itskills"
              onChange={handleSkillsChange}
              defaultValue="DEFAULT"
            >
              <option disabled value="DEFAULT">
                -- Bitte wähle etwas aus --
              </option>
              <option>Sehr gut</option>
              <option>Gut</option>
              <option>Mittel</option>
              <option>Eher nicht so gut</option>
              <option>Gar nicht gut</option>
              <option>Keine Angabe</option>
            </select>
          </div>
          <SubmitField
            InputName="Umfrage abschicken"
            InputValue="Umfrage abschicken"
            LabelName="Umfrage abschicken"
            onClick={onSubmitClick}
          />
        </form>
      </div>
      <Footer />
    </>
  );
}