import React, { useEffect, useState } from "react";
import "../../App.css";
import Footer from "../../Footer";
import InputField from "../InputField";
import SubmitField from "../SubmitField";
import { Logger } from "@behametrics/logger-web";

export default function BehaviorNormal() {
  let username = "";
  const setUsername = (tmp_username) => {
    username = tmp_username;
  };

  let password = "";
  const setPassword = (tmp_password) => {
    password = tmp_password;
  };

  const [genPassword, setGenPassword] = useState("")

  let logger = new Logger({
    //inputs: ["cursor", "wheel", "keyboard", "touch"],
    inputs: ["keyboard"],
    apiUrl: "http://localhost:5000",
    logToConsole: true,
  });

  logger.init();

  const handleOff = () => {
    logger.stop();
    console.log("Logger ausgeschaltet");
  };

  const handleOn = () => {
    logger.start();
    console.log("start logging ");
  };

  const handlePasswordChange = (e) => {
    setPassword(e.target.value);
  };

  const handleUsernameChange = (e) => {
    setUsername(e.target.value);
  };

  const handleOnCopyEvent = (e) => {
    e.preventDefault();
    return false;
  };

  const handleOnPasteEvent = (e) => {
    e.preventDefault();
    return false;
  };

  const onSubmitClick = (e) => {
    e.preventDefault();
    let opts = {
      username: username,
      password: password,
    };
    fetch("/api/protected/behavior", {
      method: "post",
      body: JSON.stringify(opts),
    }).then((response) => {
      console.log(response.status);
      if (response.status === 401) {
        response.json().then((resp) => {
          console.log("nicht so wirklich gut");
          // setErrorMessage(resp.message);
        });
      } else {
        response.json().then((token) => {
          console.log("Alles gut :-)");
        });
      }
    });
  };

  useEffect(() => {
    fetch("/api/protected/rcv_pw", {
      method: "get",
    }).then((response) => {
      response.json().then((resp) => {
        setGenPassword(resp.password)
      })
    });
  }, []);

  return (
    <>
      <div className="sitePage">
        <h1>Studie</h1>
        <button onClick={handleOn}>LOGGER StaRTEN</button>
        <p>
          Nachfolgend werden Sie einige Schritte durchlaufen, um ihre
          Nutzerinteraktion messen zu können. Verwenden Sie hierbei jeweils
          ihren Benutzernamen, welchen Sie bereits zuvor genutzt haben. Das
          Passwort wird jeweils generiert.
        </p>
        <p>
          Zu Beginn geht es darum, dass Sie ganz normal den Benutzernamen und
          das Passwort eingeben. Verhalten Sie sich einfach so, als ob Sie sich
          normalerweise anmelden.
        </p>
        <p onCopy={handleOnCopyEvent}>
          Das Passwort für diese Situation lautet: <span className="generated-password">{genPassword}</span>
        </p>
        <form id="behaviorNormal" action="#">
          <InputField
            LabelName="Benutzername"
            onChange={handleUsernameChange}
            InputType="text"
            InputName="Benutzername"
            InputPlaceHolder="Benutzername"
            onCopy={handleOnCopyEvent}
            onPaste={handleOnPasteEvent}
          />
          <InputField
            LabelName="Passwort"
            onChange={handlePasswordChange}
            InputType="password"
            InputName="Passwort"
            InputPlaceHolder="Benutzername"
            onCopy={handleOnCopyEvent}
            onPaste={handleOnPasteEvent}
          />
          <SubmitField
            LabelNa
            me="Weiter zur nächsten Situation"
            InputValue="next-situation"
            InputName="Weiter"
            onClick={onSubmitClick}
          />
        </form>
        <button onClick={handleOff}>STOP THAT FUCKING LOGGER</button>
      </div>
      <Footer />
    </>
  );
}