// array with texts to type in typewriter
let dataText = ["full stack developer", "web designer", "blogger", "gamer", "drummer"];

// typewriter effect

/**
 * typewriter function
 * type one character at a time in the typewriter
 * keeps calling itself until the text is finished
 * @param {string} text text to type
 * @param {number} i current index at which the next character should be typed
 * @param {function} fnCallback function to call back in this case the StartTextAnimation function
 */
function typewriter(text, i, fnCallback)
{
    // check if text isn't finished yet
    if (i < (text.length))
    {
        // add next character to h1
        document.querySelector("header div h1").innerHTML = text.substring(0, i + 1) + "<span aria-hidden=\"true\">_</span>";

        // wait for a while and call this function again for next character
        setTimeout(function ()
        {
            typewriter(text, i + 1, fnCallback)
        }, 100);
    }
    // text finished, call callback if there is a callback function
    else if (typeof fnCallback == "function")
    {
        // call callback after timeout
        setTimeout(fnCallback, 700);
    }
}

/**
 * StartTextAnimation function
 * start a typewriter animation for a text in the dataText array
 * @param {number} i current index at which text should be typed next
 */
function StartTextAnimation(i)
{
    if (typeof dataText[i] === "undefined")
    {
        setTimeout(function ()
        {
            StartTextAnimation(0);
        }, 1500);
    }
    else if (i < dataText[i].length)
    {
        // text exists! start typewriter animation
        typewriter(dataText[i], 0, function ()
        {
            // after callback (and whole text has been animated), start next text
            setTimeout(StartTextAnimation, 1500, i + 1);
        });
    }
}


document.addEventListener('DOMContentLoaded', () =>
{
    // start the text animation
    StartTextAnimation(0);
});