"use strict";

if (typeof(browser) == "undefined") {
    globalThis.browser = chrome;
}

const cats = [];

function reflectChange(changes, name, proc) {
    if (name in changes
        && "newValue" in changes[name]
        && !Object.is(changes[name].newValue, changes[name].oldValue)) {
        proc(changes[name].newValue);
    }
}

async function main() {
    let enabled = (await browser.storage.sync.get("enabled")).enabled;

    browser.storage.onChanged.addListener(changes => {
        reflectChange(changes, "enabled", newEnabled => {
            enabled = newEnabled;
            cats.forEach(cat => cat.hidden = !enabled);
        });
    });

    let counter = 0;
    function addCat(alt, url) {
        const floatingX = document.createElement("div");
        floatingX.style.setProperty("--floating-cats-floating-delay", `-${50 * counter++}s`);
        floatingX.classList.add("floating-cats-clickthru");
        floatingX.classList.add("floating-cats-floating");
        floatingX.classList.add("floating-cats-floating-x");
        floatingX.hidden = !enabled;
        cats.push(floatingX);
        document.body.appendChild(floatingX);

        const floatingY = document.createElement("img");
        floatingY.classList.add("floating-cats-clickthru");
        floatingY.classList.add("floating-cats-floating-y");
        floatingY.alt = alt;
        floatingY.src = browser.runtime.getURL(url);
        floatingX.appendChild(floatingY);
    }

    addCat("Spinning Marsey", "/marsey3d.webp");
    addCat("Spinning Bob", "/bobvibes.webp");
}

main();