import i18next from "i18next";

const scaleQuestions = [
    "sus-question-easy-to-use", // I thought CageCalc is easy to use
    "sus-question-unnecessarily-complex", // I find CageCalc unnecessarily complex
    "sus-question-need-support-of-technical-person", // I think that I need the support of a technical person to be able to use CageCalc
    "sus-question-well-integrated", // I found various functions in CageCalc were well integrated
    "sus-question-inconsistency", // I thought there was too much inconsistency in CageCalc
    "sus-question-learn-quickly", // I would imagine that most people would learn to use CageCalc very quickly
    "sus-question-cumbersome", // I found CageCalc very cumbersome to use
    "sus-question-confident", // I felt very confident using CageCalc
    "sus-question-trust", // I felt very confident using CageCalc
];

const freetextQuestions = [
    "question-whats-missing", // Welche Funktion fehlt dir?
    "question-pain-points", // Was muss aus deiner Sicht an XX geändert werden?
    "question-other-feedback" // Was willst du uns mitgeben?
]

function prepareQuestionnaire() {
    const form = document.getElementById("sus-form");

    scaleQuestions.forEach((key, index) => {
        const field = document.createElement("div");
        field.className = "field";
        field.id = key;
        field.innerHTML = `
          <label class="label" data-i18n="dynamic.${key}"></label>
          <p class="control">
            <input class="sus-slider" type="range" min="1" max="5" step="1" name=${key} required>
            <div class="slider-labels">
              <span data-i18n="strongly-disagree">${i18next.t('strongly-disagree')}</span>
              <span data-i18n="strongly-agree">${i18next.t('strongly-agree')}</span>
            </div>
          </p>
        `;
        form.insertBefore(field, form.querySelector('#sus-control'));
    });

    freetextQuestions.forEach((key, index) => {
        const field = document.createElement("div");
        field.classList.add("field");
        field.id = key;
        field.innerHTML = `
            <label class="label" data-i18n="dynamic.${key}"></label>
            <p class="control">
                <input class="input" type="text" name=${key}/>
            </p>
                `
        form.insertBefore(field, form.querySelector('#sus-control'));
    })
    return form;
}

window.addEventListener('DOMContentLoaded', () => {
    let form = prepareQuestionnaire();
    form.addEventListener("submit", async (e) => {
        e.preventDefault();

        const formData = new FormData(form);
        const jsonData = {};

        for (let [key, value] of formData.entries()) {
            if (key.startsWith("sws-question")) {
                jsonData[key] = parseInt(value, 10);
            } else {
                jsonData[key] = value;
            }

        }

        try {
            const response = await fetch("https://storandom.hyteck.de/submit", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify(jsonData)
            });

            const messageDiv = document.getElementById("response-message");

            if (response.ok) {
                messageDiv.classList.add("is-success");
                messageDiv.innerHTML = i18next.t("submit-success");
            } else {
                messageDiv.classList.add("is-danger");
                messageDiv.innerHTML = i18next.t("submit-error");
            }

            messageDiv.classList.remove("is-hidden");

        } catch (error) {
            const messageDiv = document.getElementById("response-message");
            messageDiv.classList.add("is-danger");
            messageDiv.removeAttribute("data-i18n");
            messageDiv.setAttribute("data-i18n", "");
            messageDiv.innerHTML = i18next.t("network-error");
            let errorP = document.createElement("p");
            errorP.className = "error";
            errorP.innerText = error;
            messageDiv.appendChild(errorP);
            messageDiv.classList.remove("is-hidden");
        }
    });
});
