const w = window

// Gets the current icon it needs to use.
const types = {
    ["success"]: {
        ["icon"]: "check_circle",
    },
    ["error"]: {
        ["icon"]: "error",
    },
    ["info"]: {
        ["icon"]: "info",
    }
}

// the color codes example `i ~r~love~s~ donuts`
const codes = {
    "~r~": "red",
    "~b~": "#378cbf",
    "~g~": "green",
    "~y~": "yellow",
    "~p~": "purple",
    "~c~": "grey",
    "~m~": "#212121",
    "~u~": "black",
    "~o~": "orange"
}

w.addEventListener("message", (event) => {
    notification({
        type: event.data.type,
        message: event.data.message,
        length: event.data.length,
    });
});

const replaceColors = (str, obj) => {
    let strToReplace = str;

    for (let id in obj) {
        strToReplace = strToReplace.replace(new RegExp(id, "g"), obj[id]);
    }

    return strToReplace
}

notification = (data) => {
    for (color in codes) {
        if (data["message"].includes(color)) {
            let objArr = {};
            objArr[color] = `<span style="color: ${codes[color]}">`;
            objArr["~s~"] = "</span>";

            let newStr = replaceColors(data["message"], objArr);

            data["message"] = newStr
        }
    }

    const notification = $(`
        <div class="notify ${data.type}">
            <div class="innerText">
                <span class="material-symbols-outlined icon">${types[data.type]["icon"]}</span>
                <p class="text">${data["message"]}</p>
            </div>
        </div>
    `).appendTo(`#root`);

    setTimeout(() => {
        notification.fadeOut(700);
    }, data.length);

    return notification;
}
