import React, { useEffect, useRef, useState } from "react";
import "../../App.css";
import Footer from "../../Footer";
import InputField from "../InputField";
import SubmitField from "../SubmitField";
import { Logger } from "@behametrics/logger-web";
import { Button } from "../Button";
import BehaviorStudyInfo from "../BehaviorStudyInfo";
import BehaviorNormal from "../BehaviorNormal";
import BehaviorPhone from "../BehaviorPhone";
import BehaviorStanding from "../BehaviorStanding";
import BehaviorStudyEnd from "../BehaviorStudyEnd";
import { authFetch } from "../../auth/AuthProvider";
export default function Study() {
const _logger = useRef(0);
const [serverUsername, setServerUsername] = useState("");
const [genPassword, setGenPassword] = useState("");
const STATES = {
START: "start",
NORMAL: "normal",
PHONE: "phone",
STANDING: "standing",
END: "end",
};
const [state, setState] = useState(STATES.START);
useEffect(() => {
_logger.current = new Logger({
//inputs: ["cursor", "wheel", "keyboard", "touch"],
inputs: ["keyboard"],
// apiUrl: "https://behavior.marcocamenzind.ch",
apiUrl: "http://localhost:5000",
logToConsole: true,
});
_logger.current.init();
authFetch("/api/username", {
method: "get",
}).then((response) => {
response.json().then((resp) => {
setServerUsername(resp.username);
});
});
}, []);
let username = "";
const setUsername = (tmp_username) => {
username = tmp_username;
};
let password = "";
const setPassword = (tmp_password) => {
password = tmp_password;
};
const handleLoggerOff = () => {
_logger.current.stop();
console.log("Logger ausgeschaltet");
};
const handleLoggerOn = () => {
_logger.current.start();
console.log("start logging ");
};
const handlePasswordChange = (e) => {
setPassword(e.target.value);
};
const handleUsernameChange = (e) => {
setUsername(e.target.value);
};
const handleOnPasteEvent = (e) => {
e.preventDefault();
console.log("paste not allowed");
return false;
};
const checkIfUsernameIsCorrect = () => {
return serverUsername === username;
};
const receiveRandomPassword = () => {
fetch("/api/rcv_pw", {
method: "get",
}).then((response) => {
response.json().then((resp) => {
console.log(resp.random_password);
setGenPassword(resp.random_password);
console.log("rcv pw; print genPassword", genPassword);
});
});
};
const checkIfPasswordIsCorrect = () => {
return genPassword === password;
};
const checkIfValuesAreCorrect = () => {
console.log(checkIfPasswordIsCorrect());
return checkIfPasswordIsCorrect() && checkIfUsernameIsCorrect();
};
const handleClickAtStepStart = () => {
receiveRandomPassword();
setState(STATES.NORMAL);
handleLoggerOn();
};
const handleClickAtStepNormal = () => {
if (checkIfValuesAreCorrect()) {
receiveRandomPassword();
setState(STATES.PHONE);
}
};
const handleClickAtStepPhone = () => {
if (checkIfValuesAreCorrect()) {
receiveRandomPassword();
setState(STATES.STANDING);
} else {
console.log("Passwort und Benutzername stimmen nicht.");
}
};
const handleClickAtStepStanding = () => {
if (checkIfValuesAreCorrect()) {
setState(STATES.END);
handleLoggerOff();
} else {
console.log("Passwort und Benutzername stimmen nicht.");
}
};
const study_start = (
<>