import { descendantElementIterator } from "../core/descendantElementIterator.js";

const timeAdded = Symbol("timeAdded");

const svgPromise = Symbol("svgPromise");
const blobSvg = Symbol("svg");
const blobSvgUrl = Symbol("svgUrl");

const isFireFox = /firefox/i.test(navigator.userAgent);

const loaded = Promise.resolve();

export default class RevealAttributes {

    static install(target: HTMLElement, mask?) {
        mask ??= target.getAttribute("styler-mask-on-enter");
        if (/\.svg$/i.test(mask)) {
            const svg = target[blobSvg] as string;
            if (!svg) {
            // mask = mask.split("#")[0] + "#" + now;
            // e.style.setProperty("--styler-mask-on-enter", `url("${mask}")`);
            return target[svgPromise] ??= fetch(mask, { mode: "cors"})
                .then((b) => b.text(), (reason) => [console.log(`Loading ${mask} failed`), console.log(reason)])
                .then((svg) => {
                    target[blobSvg] = svg;
                    return svg;
                });
            }
        }
        return loaded;
    }

    static add(target: HTMLElement, now = Date.now()) {
        let mask = target.getAttribute("styler-mask-on-enter");
        if (/\.svg$/i.test(mask)) {

            const e = target as HTMLElement;
            
            const svg = target[blobSvg] as string;
            if (!svg) {
                this.install(target, mask)
                    .then(() => 
                        this.add(target, now)
                    );
                return;
            } else {

                const text = svg.replace("</svg", `<!-- svg${Date.now().toString(36)}" --></svg`);
                if (isFireFox) {
                    // firefox doesn't restart svg from object url, it needs data url
                    const url = `data:image/svg+xml;base64,${btoa(text)}`;
                    e.style.setProperty("--styler-mask-on-enter", `url("${url}")`);

                } else {

                    const oldUrl = e[blobSvgUrl];
                    if (oldUrl) {
                        URL.revokeObjectURL(oldUrl);
                    }
                    const url = URL.createObjectURL(new File([text], "svg." + Date.now() + ".svg", {
                        type: "image/svg+xml",
                        lastModified: Date.now()
                    }));
                    e.style.setProperty("--styler-mask-on-enter", `url("${url}")`);
                    e[blobSvgUrl] = url;
                }
            }

            // const svgElement = target[blobSvg] as SVGSVGElement;
            // if (!svgElement) {
            //     // mask = mask.split("#")[0] + "#" + now;
            //     e.style.setProperty("--styler-mask-on-enter", `url("${mask}")`);
            //     fetch(mask, { mode: "cors"})
            //         .then((b) => b.text(), (reason) => [console.log(`Loading ${mask} failed`), console.log(reason)])
            //         .then((svg) => sanitizeDom(svg as string, "image/svg+xml"))
            //         .then((svg) => {
            //             const d = document.createElement("div");
            //             d.innerHTML = svg;
            //             const m = document.createElementNS("http://www.w3.org/2000/svg","mask");
            //             m.setAttribute("mask-type", "alpha");
            //             m.setAttribute("width", "100%");
            //             m.setAttribute("height", "100%");
            //             m.setAttribute("x", "0");
            //             m.setAttribute("y", "0");
            //             const s = target[blobSvg] = d.firstElementChild;
            //             m.innerHTML = s.innerHTML;
            //             s.innerHTML = "";
            //             s.appendChild(m);
            //             m.id = `svg_${Date.now().toString(36)}_svg`;

            //             d.style.position = "fixed";
            //             d.style.top = "10000px";
            //             d.style.left = "10000px";
            //             document.body.appendChild(d);
            //             e.style.setProperty("--styler-mask-on-enter", `url("#${m.id}")`);
            //         });
            // } else {
            //     svgElement.setCurrentTime(0);
            // }
        }
        target.setAttribute("styler-entered", "true");
        target[timeAdded] = now;
    }

    static remove(target: HTMLElement, now = Date.now()) {
        const last = target[timeAdded] ?? now;
        const life = now - last;
        if (life < 1000) {
            return;
        }
        target.removeAttribute("styler-entered");
        target.setAttribute("styled-exited", "true");
        setTimeout(() => target.removeAttribute("styled-exited"), 300);
    }

    static addAll(target: HTMLElement) {
        const now = Date.now();
        for(const d of descendantElementIterator(target)) {
            if (d.hasAttribute("styler-on-enter") || d.hasAttribute("styler-mask-on-enter")) {
                RevealAttributes.add(d as HTMLElement, now);
            }
        }
    }

    static removeAll(target: HTMLElement) {
        const now = Date.now();
        for(const d of descendantElementIterator(target)) {
            if ((d as HTMLElement).hasAttribute("styler-entered")) {
                RevealAttributes.remove(d as HTMLElement, now);
            }
        }
    }
}