// frameworks
import LocalStorage from "/emcJS/data/storage/global/LocalStorage.js";
import HTMLTemplate from "/emcJS/util/html/template/HTMLTemplate.js";
import CSSTemplate from "/emcJS/util/html/template/CSSTemplate.js";
import CustomElement from "/emcJS/ui/element/CustomElement.js";

// Track-OOT
import DeveloperData from "/script/data/DeveloperData.js";

const SUPPORTER_URL = new URL("/patreon", location);
if (location.hostname == "localhost") {
    SUPPORTER_URL.port = 10001;
}

const TPL = new HTMLTemplate(`
<div id="credits">
    <div class="panel">
        <label>
            <span class="title">Team</span>
            <ul id="team">
            </ul>
        </label>
        <label>
            <span class="title">Contributors</span>
            <ul id="contributor">
            </ul>
        </label>
    </div>
    <div class="panel" id="supporters">
    </div>
</div>
`);

const STYLE = new CSSTemplate(`
#credits {
    height: 100%;
    display: flex;
    padding: 5px;
    color: white;
    overflow: hidden;
}
#credits .panel {
    display: block;
    flex: 1;
    padding: 10px;
    margin: 5px;
    background-color: #282828;
}
#credits ul {
    padding-inline-start: 10px;
}
#credits .title {
    font-size: 1.2em;
    font-weight: bold;
}
#credits .name {
    list-style: none;
    padding: 5px 0;
    font-size: 1.5em;
}
#credits .name.owner {
    color: #cb9c3d;
}
#credits .name.team {
    color: #0099ff;
}
#credits .name.contributor {
    color: #ff2baa;
}
#credits #supporters .name {
    color: #a8a8a8;
}
`);

function sortNames(a, b) {
    if (a.toLowerCase() < b.toLowerCase()) {
        return -1;
    }
    return 1;
}

function sortTiers([, a], [, b]) {
    if (a.value > b.value) {
        return -1;
    }
    return 1;
}

function createDevEntry(name, type) {
    const el = document.createElement("li");
    el.classList.add("name");
    el.classList.add(type);
    el.innerHTML = name;
    return el;
}

function createSupporterPanel(title, data) {
    if (data != null && Array.isArray(data.names) && data.names.length > 0) {
        const res = document.createElement("label");
        const ttl = document.createElement("span");
        ttl.classList.add("title");
        ttl.innerHTML = title;
        const lst = document.createElement("ul");
        for (const name of new Set(data.names)) {
            const el = document.createElement("li");
            el.classList.add("name");
            el.innerHTML = name;
            el.style.color = data.color || "";
            lst.append(el);
        }
        res.append(ttl);
        res.append(lst);
        return res;
    }
}

async function fillCredits(teamList, contributorList, supporterList) {
    teamList.append(createDevEntry(DeveloperData.owner, "owner"));
    const team = DeveloperData.team.sort(sortNames);
    for (const name of team) {
        teamList.append(createDevEntry(name, "team"));
    }
    const contributors = DeveloperData.contributors.sort(sortNames);
    for (const name of contributors) {
        contributorList.append(createDevEntry(name, "contributor"));
    }
    let supporters = LocalStorage.get("supporters", {});
    try {
        const r = await fetch(SUPPORTER_URL);
        if (r.status < 200 || r.status >= 300) {
            throw new Error(`error loading patreon data - status: ${r.status}`);
        }
        supporters = await r.json();
        LocalStorage.set("supporters", supporters);
    } catch (err) {
        console.error(err);
    }
    for (const [key, value] of Object.entries(supporters).sort(sortTiers)) {
        const el = createSupporterPanel(key, value);
        if (el != null) {
            supporterList.append(el);
        }
    }
}

export default class CreditsTab extends CustomElement {

    constructor() {
        super();
        this.shadowRoot.append(TPL.generate());
        STYLE.apply(this.shadowRoot);
        /* --- */
        const teamList = this.shadowRoot.getElementById("team");
        const contributorList = this.shadowRoot.getElementById("contributor");
        const supporterList = this.shadowRoot.getElementById("supporters");
        fillCredits(teamList, contributorList, supporterList);
    }

}

customElements.define("tootr-credits", CreditsTab);
