import { SFrame, Stear, _ } from "../../main.js";
import { fadein, fadeout, wait } from "../../utils.js";

const preRender = true;

Stear.addGlobalStyleJSON({
    position: "fixed",
    left: "50%",
    bottom: "1rem",
    transform: "translate(-50%, -50%)",
    textAlign: "center",
    border: `2px soild transparent`,
    borderRadius: "1rem",
    padding: "1rem",
    transition: "background-color 200ms",
    backgroundColor: "#212121",
    color:"#fafafa",
    webkitUserSelect: "none",

},".stear_status");

const render = ({ }, { }) => {

    return _({
        find:"main",
        class:"stear_status",
    });
}

const statusList = [];
var statusActive = false;

const call = async (stear, { find, resolve, render, call }, { text, color="grey" }) => {
    statusList.push({ text, color, resolve});
    if (statusActive) return;
    statusActive = true;

    var next = statusList.shift();
    var last;

    find.main.settings = {style:{
        border: "2px solid " + next.color
    }};
    find.main._.innerText = next.text;

    await fadein(find.main._, 200, true);
    find.main._.style.transition = "";

    async function loop(){
        last = next;
        next = statusList.shift();
        if (next == null) return finish();
        last.resolve(null, false);

        find.main.settings = { style: { backgroundColor: "#555" } };
        await wait(200);
        find.main.settings = {
            style: {
                backgroundColor: "",
                border: "2px solid " + next.color
            }
        };
        find.main._.innerText = next.text;
        timeoutId = setTimeout(loop,3000);
    }
    var timeoutId = setTimeout(loop, 3000);
    find.main._.onclick = ()=>{
        if(timeoutId<0)return;
        clearTimeout(timeoutId);
        timeoutId = -1;
        loop();
    };

    async function finish(){
        if (timeoutId >= 0)clearTimeout(timeoutId);
        timeoutId = -1;
        statusActive = false;

        await fadeout(find.main._);

        last.resolve();
    }
}

export default new SFrame({
    preRender, render, call
});