import ImageTagHelper from "../../core/ImageTagHelper.js";
import TemplateControl from "../../core/TemplateControl.js";

let id = 1;

const onLoaded = (e: Event) => (e.target as HTMLElement).setAttribute("loaded", "1");
const bindLoaded = (img: HTMLElement) => (img.removeAttribute("loaded"), img.onload = onLoaded);

class ImageGrid extends TemplateControl {

    onChildAdded(child: HTMLElement) {
        const dataOnReveal = this.getAttribute("styler-on-enter");
        if (dataOnReveal) {
            child.setAttribute("styler-on-enter", dataOnReveal);
        }

        if (child.tagName === "IMG") {
            if (child.getAttribute("large-src")) {
                
            } else {
                const {thumb } = ImageTagHelper.getUrls(child);
                if (thumb !== child.getAttribute("src")) {
                    child.setAttribute("src", thumb);
                }
            }

            const img = child as HTMLImageElement;
            bindLoaded(img);
        }
    }
    onChildRemoved(child: Node) {
    }

    onClickEvent = (e: MouseEvent) => {
        let start = e.target as HTMLElement;
        while(start && !/^(video|img)/i.test(start.tagName)) {
            start = start.parentElement;
        }
        if (!start) {
            return;
        }

        const fullScreen = document.createElement("full-screen-image-gallery");

        const { children } = this;

        let selected = null;

        for (let index = 0; index < children.length; index++) {
            const element = children[index];
            const newChild = element.cloneNode(true) as HTMLImageElement;
            if (element === start) {
                selected = newChild;
            }
            if (newChild.tagName === "IMG") {
                let src = newChild.getAttribute("large-src");
                if (!src) {
                    const { full } = ImageTagHelper.getUrls(newChild);
                    src = full;
                }
                newChild.setAttribute("src", src);
                newChild.setAttribute("loading", "lazy");
                newChild.style.setProperty("object-fit", "contain");
                newChild.removeAttribute("height");
                newChild.removeAttribute("width");
            }
            bindLoaded(newChild);
            fullScreen.appendChild(newChild);
        }
        fullScreen.style.position = "fixed";
        fullScreen.style.width = "100%";
        fullScreen.style.height = "100%";
        (fullScreen as any).selected = selected;
        document.body.appendChild(fullScreen);
    };

    async prepare() {

        this.id ||= `img_grid_${id++}`;

        this.addEventListener("click", this.onClickEvent);
    }

}

customElements.define("image-grid", ImageGrid);