import { SDV } from "./sdv.js";

// A hack, generally globals really shouldn't be used.
// But this will do until the wiki can be modified more cardinally.
const skins = window.skins;

const tail = ([, ...t]) => t;

let current = skins[0][0];

const sdv = new SDV(current);

const util = {
    ifFileExists: function (file) {
        const http = new XMLHttpRequest();

        http.open("HEAD", file, false);
        http.send();
        return http.status != 404 && http.status != 403;
    },
    clearAllChildren: function (element) {
        const myNode = document.getElementById(element);
        while (myNode.firstChild) {
            myNode.removeChild(myNode.firstChild);
        }
    },
    loadShipList: function (callback) {
        const xobj = new XMLHttpRequest();
        xobj.overrideMimeType("application/json");
        xobj.open("GET", "json/shiplist.json", true); // Replace 'my_data' with the path to your file
        xobj.onreadystatechange = function () {
            if (xobj.readyState == 4 && xobj.status == "200") {
                // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
                callback(xobj.responseText);
            }
        };
        xobj.send(null);
    },
    loadShipJSON: function (ship, callback) {
        const xobj = new XMLHttpRequest();
        xobj.overrideMimeType("application/json");
        xobj.open("GET", "Ships/" + ship + ".json", true); // Replace 'my_data' with the path to your file
        xobj.onreadystatechange = function () {
            if (xobj.readyState == 4 && xobj.status == "200") {
                // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
                callback(xobj.responseText, ship);
            }
        };
        xobj.send(null);
    },
    guidGenerator: function () {
        const S4 = function () {
            return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
        };
        return S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4();
    },
};

function loadShipSkinElements() {
    util.clearAllChildren("shipSkinExpressions-" + current);
}

function setShipExpressionNav(skin) {
    const expressions = tail(skin);
    var firstIteration = true;
    var initial = "";
    var id = "";
    for (const x of expressions) {
        var container = document.createElement("img");
        container.id = "expr-" + current + "_" + x;
        container.setAttribute("onclick", 'onExpressionNavButtonClick("' + x + '","' + skin[0] + '")');
        if (firstIteration) {
            container.src =
                expressions.length == 1
                    ? "../../../assets/squareicon/" + skin[0] + ".png"
                    : "../../../assets/paintingface/" + skin[0] + "/" + x + ".png";
            container.className = "active expression";
            firstIteration = false;
            initial = x;
            id = x;
        } else {
            container.src = "../../../assets/paintingface/" + skin[0] + "/" + x + ".png";
            container.className = "expression";
        }

        document.getElementById("shipSkinExpressions-" + current).appendChild(container);
    }
}

// Also a hack, but it allows us to expose these functions from this module in the global namespace.
// But again, this will do until the wiki can be modified more cardinally.
globalThis.onExpressionNavButtonClick = function (exprID, skinID) {
    const id = "expr-" + current + "_" + exprID;
    const obj = document.getElementById("shipSkinExpressions-" + current).children;

    for (let i = 0; i < obj.length; ++i) {
        if (obj[i].id == id) {
            document.getElementById(id).classList.add("active");
            document.getElementById("painting-" + current).src =
                "../../../assets/painting/" + skinID + (exprID == 0 ? "" : "-" + exprID) + ".png";
        } else document.getElementById(obj[i].id).classList.remove("active");
    }
};

globalThis.skinChange = function (i, skinID) {
    current = skins[i][0];
    loadShipSkinElements(skinID);
    setShipExpressionNav(skins[i]);
    onExpressionNavButtonClick(skins[i][1], skinID);
    sdv.selectedSD = current;
    sdv.init();
};

loadShipSkinElements(skins[0][0]);
setShipExpressionNav(skins[0]);
onExpressionNavButtonClick(skins[0][1], skins[0][0]);

sdv.init();
