const JSON_WEBRING = "https://git.gablaxy.xyz/gablaxy/webring/raw/branch/main/webring.json";

const template = document.createElement("template");
template.innerHTML = `
<style>
#webring-container{
    margin-top: 10px;
    border: 1px solid #9162c7;
    border-radius: 5px;
    padding: 5px;
    display: inline-flex;
    background-color: #222326;
}

#webring-title{
    font-family: Title;
    color: #c296f5;
    margin-top: 0;
    margin-bottom: 3px;
    padding: 0 5px;
    font-size: 1.2em;
    text-align: center;
}

#webring-inner a{
    color: #9162c7;
    text-decoration: none;
    padding: 0 5px;
}

#webring-inner a:hover{
    color: #c296f5;
}

#webring-inner{
    font-family: FreePixel;
    color: #c296f5;
    padding: 0 5px;
}
</style>

<div id="webring-container">
    <b class="black" id="webring-inner">
        <!-- Webring content -->
    </b>
</div>
`;

class Webring extends HTMLElement {
    connectedCallback() {

        this.attachShadow({ mode: "open" });

        this.shadowRoot.appendChild(template.content.cloneNode(true));

        const currentSite = this.getAttribute("site");

        fetch(JSON_WEBRING)
            .then((response) => response.json())
            .then((sites) => {
                const normalize = (url) => url.replace(/\/$/, "");
                
                const matchedSiteIndex = sites.findIndex(
                    (site) => normalize(site.url) === normalize(currentSite)
                );

                if (matchedSiteIndex === -1) {
                    this.shadowRoot.querySelector("#webring-inner").insertAdjacentHTML("afterbegin", `
                        <h3 id="webring-title">grossomodo</h3>
                        <p>T'es pas dans le gang bozo</p>
                    `);
                    return;
                }

                let previousSiteIndex = matchedSiteIndex - 1;
                if (previousSiteIndex < 0) previousSiteIndex = sites.length - 1;

                let nextSiteIndex = matchedSiteIndex + 1;
                if (nextSiteIndex >= sites.length) nextSiteIndex = 0;

                const content = `
                    <h3 id="webring-title">grossomodo</h3>
                    <a href="${sites[previousSiteIndex].url}" rel="prev noreferrer external">&lt; avant</a>
                    /   
                    <a rel="external noreferrer" href="${sites[matchedSiteIndex].url}">${sites[matchedSiteIndex].name}</a>
                    / 
                    <a href="${sites[nextSiteIndex].url}" rel="next noreferrer external">après &gt;</a>
                `;

                this.shadowRoot
                    .querySelector("#webring-inner")
                    .insertAdjacentHTML("afterbegin", content);
            })
            .catch((error) => {
                console.error(error);
                const content = `
                <h3 id="webring-title">grossomodo</h3>
                <p>T'es pas dans le gang bozo</p>
                `;
                
                this.shadowRoot
                    .querySelector("#webring-inner")
                    .insertAdjacentHTML("afterbegin", content);
            });
    }
}

window.customElements.define("webring-iutechno", Webring);