import { Engine } from "./engine";
import { setTimeoutRef } from "./utils/SetTimeoutRef";

import { removeChildrenFromElement } from "../utils/uiHelpers/removeChildrenFromElement";
import { createElement } from "../utils/uiHelpers/createElement";
import { exceptionAlert } from "../utils/helpers/exceptionAlert";
import { isString } from "../utils/helpers/isString";

export let cinematicTextFlag = false;

/**
 * Print a message using a hacking-style "typing" effect.
 * Note that this clears the UI so that the text from this is the only thing visible.
 * 
 * @param lines {string[]} Array of strings to print, where each element is a separate line
 */
export function writeCinematicText(lines) {
    cinematicTextFlag = true;

    if (lines.constructor !== Array) {
        throw new Error("Invalid non-array argument passed into writeCinematicText()");
    }

    // Reuse the 'Red Pill' content
    Engine.loadCinematicTextContent();
    const container = document.getElementById("cinematic-text-container");
    container.style.width = "75%";
    if (container == null) {throw new Error("Could not find cinematic-text-container for writeCinematicText()");}
    removeChildrenFromElement(container);

    for (let i = 0; i < lines.length; ++i) {
        if (!isString(lines[i])) {
            throw new Error("Invalid non-string element in 'lines' argument. writeCinematicText() failed");
        }
    }

    return writeCinematicTextRecurse(lines).then(function() {
        return cinematicTextEnd(); //Puts the continue button
    }).catch(function(e) {
        exceptionAlert(e);
    });
}

function writeCinematicTextRecurse(lines, lineNumber=0) {
    if (lineNumber >= lines.length) {return Promise.resolve(true);}
    return writeCinematicTextLine(lines[lineNumber]).then(function() {
        return writeCinematicTextRecurse(lines, lineNumber+1);
    });
}

function writeCinematicTextLine(line) {
    return new Promise(function(resolve, reject) {
        const container = document.getElementById("cinematic-text-container");
        const pElem = document.createElement("p");
        container.appendChild(pElem);

        const promise = writeCinematicTextLetter(pElem, line, 0);
        promise.then(function(res) {
            resolve(res);
        }, function(e) {
            reject(e);
        });
    });
}

function writeCinematicTextLetter(pElem, line, i=0) {
    return new Promise(function(resolve, reject) {
        setTimeoutRef(function() {
            const textToShow = line.substring(0, i);

            if (i >= line.length) {
                pElem.innerHTML = textToShow;
                return resolve(true);
            }

            pElem.innerHTML = textToShow + "<span class='typed-cursor'> &#9608; </span>";
            const promise = writeCinematicTextLetter(pElem, line, i+1);
            promise.then(function(res) {
                resolve(res);
            }, function(e) {
                reject(e);
            });
        }, 15);
    });
}

function cinematicTextEnd() {
    var container = document.getElementById("cinematic-text-container");
    var mainMenu = document.getElementById("mainmenu-container");
    container.appendChild(createElement("br"));

    return new Promise (function(resolve) {
        container.appendChild(createElement("a", {
            class:"a-link-button", innerText:"Continue...",
            clickListener:()=>{
                removeChildrenFromElement(container);
                Engine.loadTerminalContent();
                mainMenu.style.visibility = "visible";
                cinematicTextFlag = false;
                resolve();
            },
        }));
    });
}