import * as basicLightbox from 'basiclightbox'

class CustomImage extends HTMLElement {
    async connectedCallback(){
        const originalURL = new URL(this.getAttribute("src"), document.baseURI).href;


        var graphql = JSON.stringify({
            query: "query($url: String!) {imgproxy(url: $url)}",
            variables: {
                "url": originalURL
            }
        })
        var requestOptions = {
            method: 'POST',
            body: graphql,
            headers: { 'Content-Type': 'application/json' }
        };

        let imgproxy = (await (await fetch("/API/graphql.php", requestOptions)).json()).data.imgproxy;
        
        let image = document.createElement("img");
        image.src = imgproxy;
        image.setAttribute("alt", this.getAttribute("alt"));
        image.setAttribute("title", this.getAttribute("title"));
        image.setAttribute("class", this.getAttribute("class"));
        image.setAttribute("style", this.getAttribute("style"));
        image.setAttribute("width", this.getAttribute("width"));
        image.setAttribute("height", this.getAttribute("height"));
        image.setAttribute("loading", "lazy");
        image.setAttribute("original-src", originalURL);
        this.appendChild(image);


        if(!(this.getAttribute("data-noPreview") === "true")) {
            image.onclick = () => {
                const instance = basicLightbox.create(`
                <img src="${originalURL}">
                `);
                instance.show();
            }
        }
    }
}

customElements.define("jl-img", CustomImage)