//const typedTextSpan = document.querySelector(".typed-text");
//const cursorSpan = document.querySelector(".cursor");

var textArray = [];

fetch('/api/v1/randomNames')
        .then(function (response) {
            return response.json();
        })
        .then(function (persons) {

            persons.forEach(function (currentPerson) {
//                textArray.push(currentPerson.name);
                textArray.push(currentPerson);
            });

            if (persons.length == 0)
            {
                textArray = ["teens", "MILFs", "kinky sex", "amateurs", "dirty sluts"];
            }
            setTimeout(type, newTextDelay + 250)
            console.log(JSON.stringify(persons));
        });

//const userAction = async () => {
//    alert('hi')
//  const response =  fetch('http://localhost:1025/api/randomNames');
//    alert('ho')
//  const persons = response.json(); //extract JSON from the http response
//    alert('go')
//
//const textArray = [persons[0].name, persons[1].name];
//    if (textArray.length)
//        setTimeout(type, newTextDelay + 250);
//
//  
//    // do something with myJson
//}

//const textArray = ["some fun", "kinky sex", "amateurs", "dirty sluts"];
//const textArray = [""];
const typingDelay = 200;
const erasingDelay = 100;
const newTextDelay = 2000; // Delay between current and next text
let textArrayIndex = 0;
let charIndex = 0;

function type() {
    const typedTextSpan = document.querySelector(".typed-text");
    const cursorSpan = document.querySelector(".cursor");

    typedTextSpan.addEventListener("click", function (e) {
//        console.log(this.className); // logs the className of my_element
//        console.log(cursorSpan);
//        console.log(typedTextSpan.innerHTML);
        const searchField = document.getElementById("searchfield");
        // TODO: does not work
//        document.getElementById('submitButton').click();
        console.log("searchfield text: " + searchField);
        searchField.value = typedTextSpan.innerHTML;

//        console.log(e.currentTarget === this); // logs `true`
    });


    if (charIndex < textArray[textArrayIndex].length) {
        if (!cursorSpan.classList.contains("typing"))
            cursorSpan.classList.add("typing");
        typedTextSpan.textContent += textArray[textArrayIndex].charAt(charIndex);
        charIndex++;
        setTimeout(type, typingDelay);
    } else {
        cursorSpan.classList.remove("typing");
        setTimeout(erase, newTextDelay);
    }
}

function erase() {
    const typedTextSpan = document.querySelector(".typed-text");
    const cursorSpan = document.querySelector(".cursor");

    if (charIndex > 0) {
        if (!cursorSpan.classList.contains("typing"))
            cursorSpan.classList.add("typing");
        typedTextSpan.textContent = textArray[textArrayIndex].substring(0, charIndex - 1);
        charIndex--;
        setTimeout(erase, erasingDelay);
    } else {
        cursorSpan.classList.remove("typing");
        textArrayIndex++;
        if (textArrayIndex >= textArray.length)
            textArrayIndex = 0;
        setTimeout(type, typingDelay + 1100);
    }
}

//document.addEventListener("DOMContentLoaded", function () { // On DOM Load initiate the effect
//    if (textArray.length)
//        setTimeout(type, newTextDelay + 250);
//});
