// noinspection JSUnresolvedVariable
window.bannerFrench = false;

function timeAgo(time) {
    if (!isNaN(parseInt(time))) {
        time = new Date(time).getTime();
    }

    let periods = ["second", "minute", "hour", "day", "week", "month", "year", "age"];

    if (bannerFrench) {
        periods = ["seconde", "minute", "heure", "jour", "semaine", "mois", "an", "des année"];
    }

    let lengths = ["60", "60", "24", "7", "4.35", "12", "100"];

    let now = new Date().getTime();

    let difference = Math.round((now - time) / 1000);
    let tense;
    let period;

    if (bannerFrench) {
        if (difference <= 10 && difference >= 0) {
            return "à l'instant";
        } else if (difference > 0) {
            tense = "il y a";
        } else {
            tense = "dans";
        }
    } else {
        if (difference <= 10 && difference >= 0) {
            return "now";
        } else if (difference > 0) {
            tense = "ago";
        } else {
            tense = "later";
        }
    }

    let j;

    for (j = 0; difference >= lengths[j] && j < lengths.length - 1; j++) {
        difference /= lengths[j];
    }

    difference = Math.round(difference);

    period = periods[j] + (difference > 1 ? "s" : '');

    if (bannerFrench) {
        return `${tense} ${difference} ${period}`;
    } else {
        return `${difference} ${period} ${tense}`;
    }
}

async function refreshBanner(offline, french) {
    if (!offline) offline = false;
    if (!french) french = false;

    window.bannerFrench = french;

    let data = window.currentMemberData;
    let index;

    if (data['last_fronted'] && data['last_fronted']['timestamp']) {
        data['last_fronted']['relative'] = timeAgo(currentMemberData.last_fronted.timestamp * 1000);
    }

    if (data.id === "scootaloo" && new Date().getDay() % 2 === 0) {
        data['relations']['marefriends'] = data['relations']['marefriends'].reverse();
    }

    if (offline) {
        let images = JSON.parse(await localforage.getItem("images"));

        index = 0;
        for (let species of data['species']) {
            data['species'][index]["icon_offline"] = images.misc.species[species['id']];
            index++;
        }

        index = 0;
        for (let relation of data['relations']['marefriends']) {
            data['relations']['marefriends'][index]["icon_offline"] = images.ponytown[relation['id'].split("/")[0]][relation['id'].split("/")[1]];
            index++;
        }

        index = 0;
        for (let relation of data['relations']['sisters']) {
            data['relations']['sisters'][index]["icon_offline"] = images.ponytown[relation['id'].split("/")[0]][relation['id'].split("/")[1]];
            index++;
        }

        if (data['relations']['caretakers']) {
            index = 0;
            for (let relation of data['relations']['caretakers']) {
                data['relations']['caretakers'][index]["icon_offline"] = images.ponytown[relation['id'].split("/")[0]][relation['id'].split("/")[1]];
                index++;
            }
        }

        data['system']['icon_offline'] = images.misc.systems[data['system']['icon']];
    }

    document.getElementById("member-banner").innerHTML = `

<div id="system-info" style="border:1px solid #${data['color']};background:rgba(255, 255, 255, .1);border-radius:10px;display:grid;grid-template-columns: 128px 1fr;">
    <div style="margin:10px;width:100%;display:flex;align-items: center;justify-content: center;">
        <img id="member-icon" src="${offline ? JSON.parse(await localforage.getItem("images")).profile[data['icon']['offline'].split(".")[0].split("-")[1]][data['icon']['offline'].split(".")[0].split("-")[2]] : (data['icon']['online'] ?? (data['id'] === "fusion" ? '/assets/logo/logo.png' : data['system']['icon']))}" alt="" style="background-color:rgba(255, 255, 255, .125);width:128px;height:128px;border-radius:5px;">
    </div>
    
    <div style="padding:10px 10px 10px 20px;text-align:center;">
        <h3 style="margin-bottom:0;">
            ${data['id'] === "unknown" ? `
            <span class="text-muted">Unknown member (${data['system']['name']} System)</span>
            ` : data['id'] === "fusion" ? (data['name'] === "fusion" ? `
            <span class="text-muted">Multiple merged members</span>
            ` : data['name']) : data['name']}
        </h3>
        
        <div style="margin-bottom:0.5rem;">
            ${data['badges'].map(i => i.html).join(" ")}
            ${data['badges'].length === 0 ? "&nbsp;" : ""}
        </div>
        
        <div style="display:grid;grid-template-columns: repeat(${data['median'] || data['id'] === "unknown" ? 4 : data['id'] === "fusion" ? 3 : 5}, 1fr);" id="member-card">
            <span>
                <b>${french ? `Préfixe${data['prefixes'].length > 1 ? 's' : ''} ` : `Prefix${data['prefixes'].length > 1 ? 'es' : ''}`}: </b>
                <code style="color: white;">${data['prefixes'].join('</code>, <code style="color: white;">')}</code>
            </span>
            <span>
                <b>${french ? "Pronoms :" : "Pronouns:"} </b>
                ${data['id'] === "fusion" ? "she/her" : data['pronouns']}
            </span>
            ${!data['median'] && data['id'] !== "unknown" ? `
            <span>
                ${data["id"] === "fusion" ? `
                <b>Fronting since : </b>
                ${data['last_fronted'] ? `
                    ${data['last_fronted']['now'] ? `
                        <span class="relative-time" data-relative-timestamp="${data['last_fronted']['timestamp']}">${data['last_fronted']['relative']}</span><br>&nbsp;
                    ` : `
                        <span class="text-muted">Not fronting</span><br>&nbsp;
                    `}
                ` : `<span class="text-muted">Not fronting</span><br>&nbsp;`}` : `
                <b>${french ? "Front :" : "Last fronted:"} </b>
                ${data['last_fronted'] ? `
                    ${data['last_fronted']['now'] ? `
                        ${french ? "En ce moment" : "Right now"}<br>
                        (${french ? "commencé" : "started"} <span class="relative-time" data-relative-timestamp="${data['last_fronted']['timestamp']}">${data['last_fronted']['relative']}</span>)
                    ` : `
                        <span class="relative-time" data-relative-timestamp="${data['last_fronted']['timestamp']}">${data['last_fronted']['relative']}</span><br>
                        (${french ? "pendant" : "for"} ${data['last_fronted']['duration']['pretty']})
                    `}
                ` : `${french ? "Il y a très longtemps" : "A long time ago"}<br>&nbsp;`}`}
            </span>
            ` : ''}
            ${data['id'] !== "fusion" ? `
            <span>
                ${data['id'] === "unknown" ? "<b>Species: </b> best to ask" : `
                <span style="vertical-align: middle;position:relative;top:-5px;"><b>${french ? (data['species'].length > 1 ? "Espèces : " : "Espèce : ") : "Species: "}</b></span>
                ${data['species'].map(species => `
                    <img data-bs-toggle="tooltip" title="${species['name']}" style="width:32px;vertical-align: middle;position:relative;top:-5px;" src="${offline ? species['icon_offline'] : `/assets/species/${species['icon']}`}" alt="${species['name']}">
                `).join("")}`}
            </span>` : ''}
            ${data['id'] !== "fusion" ? `
            <span>
                <b>${french ? "Système : " : "System: "}</b>
                <a class="member-link" href="${data['system']['page']}"><img style="width:24px;border-radius:5px;" src="${offline ? data['system']['icon_offline'] : `/assets/uploads/${data['system']['icon']}`}"> ${data['system']['name']}</a>
                ${data['system']['subsystem'] ? `
                    <br><b>${french ? "Sous-système : " : "Subsystem: "} </b><a class="member-link" href="${data['system']['subsystem']['page']}"><img style="width:24px;border-radius:5px;" src="/assets/uploads/${data['system']['subsystem']['icon']}"> ${data['system']['subsystem']['name']}</a>
                ` : data['system']['temporary'] ? '<br>(temporary)' : ''}
            </span>
            ` : ''}
        </div>
        ${data['id'] !== "unknown" && data['id'] !== "fusion" ? `
        <div style="display:grid;grid-template-columns: repeat(${data["little"] ? "3" : "2"}, 1fr);margin-top:5px;">
            <span>
                <b>${french ? (data['relations']['marefriends'].length > 1 ? 'Partenaires ' : 'Partenaire ') : `Marefriend${data['relations']['marefriends'].length > 1 ? 's' : ''}`}: </b>${data['relations']['marefriends'].length > 1 ? '<span class="list-separator-mobile"><br></span>' : ''}
                ${data['relations']['marefriends'].map(relation => `
                    <a class="member-link" href="${relation['link']}"><img src="${offline ? relation['icon_offline'] : `/assets/uploads/${relation['icon']}`}" style="width:24px;"> ${relation['name']}</a>`).join(`<span class="list-separator-desktop">, </span><span class="list-separator-mobile"><br></span>`)}
                ${data['relations']['marefriends'].length === 0 ? '-' : ''}
            </span>
            <span>
                <b>${french ? (data['relations']['sisters'].length > 1 ? 'Sœurs ' : 'Sœur ') : `Sister${data['relations']['sisters'].length > 1 ? 's' : ''}`}: </b>${data['relations']['sisters'].length > 1 ? '<span class="list-separator-mobile"><br></span>' : ''}
                ${data['relations']['sisters'].map(relation => `
                    <a class="member-link" href="${relation['link']}"><img src="${offline ? relation['icon_offline'] : `/assets/uploads/${relation['icon']}`}" style="width:24px;"> ${relation['name']}</a>`).join(`<span class="list-separator-desktop">, </span><span class="list-separator-mobile"><br></span>`)}
                ${data['relations']['sisters'].length === 0 ? '-' : ''}
            </span>
            ${data['little'] ? `
                <span>
                    <b>${french ? (data['relations']['sisters'].length > 1 ? 'Caretakers ' : 'Caretaker ') : `Caretakers${data['relations']['caretakers'].length > 1 ? 's' : ''}`}: </b>${data['relations']['caretakers'].length > 1 ? '<span class="list-separator-mobile"><br></span>' : ''}
                    ${data['relations']['caretakers'].map(relation => `
                        <a class="member-link" href="${relation['link']}"><img src="${offline ? relation['icon_offline'] : `/assets/uploads/${relation['icon']}`}" style="width:24px;"> ${relation['name']}</a>`).join(`<span class="list-separator-desktop">, </span><span class="list-separator-mobile"><br></span>`)}
                    ${data['relations']['caretakers'].length === 0 ? '-' : ''}
                </span>
            ` : ''}
        </div>
        ` : '<div style="margin-top:5px;">&nbsp;</div>'}
    </div>
</div>

`;
}