// * Video frames.
document.addEventListener("DOMContentLoaded", function () {
    const videoFrameList = document.querySelectorAll(
        ".video-frame"
    ) as NodeListOf<HTMLLinkElement>;
    for (const videoLink of videoFrameList) {
        if (!videoLink.dataset.type) {
            throw new Error("Missing dataset type");
        }
        if (!videoLink.dataset.frame) {
            throw new Error("Missing dataset frame");
        }
        // @ts-ignore
        window.__CN_VIDEO = window.__CN_VIDEO ?? {};

        const newIframe = document.createElement("iframe");
        newIframe.frameBorder = "0";
        newIframe.allow = "fullscreen";
        newIframe.width = "1920px";
        newIframe.height = "1080px";
        newIframe.setAttribute("allowfullscreen", "allowfullscreen");

        // @ts-ignore
        const instance = new FsLightbox();
        instance.props.sources = [newIframe];

        setTimeout(() => {
            videoLink.addEventListener("click", (e) => {
                e.preventDefault();

                // * This comes fslightbox lib
                // @ts-ignore
                instance.open();
                setTimeout(function () {
                    // @ts-ignore
                    newIframe.src = window.__CN_VIDEO[videoLink.dataset.type]
                        ? String(videoLink.href)
                        : String(videoLink.dataset.frame);
                }, 50);
                return false;
            });
        }, 300);
    }

    const scrollTop = (target: string, offset: number = 0) => {
        const targetElement = document.getElementById(target);
        if (!targetElement) throw new Error(`scrollTop requires ${target} to exist`);
        const top = targetElement.getBoundingClientRect().top,
            t = window.scrollY + top - offset;
        scrollTo({
            top: t,
            behavior: "smooth"
        });
    };

    const pageUp = document.getElementById("page-up");
    if (pageUp) {
        pageUp.addEventListener("click", () => scrollTop("content-container", 250)),
        document.addEventListener("scroll", () => {
            if (window.scrollY > 250) {
                pageUp.classList.add("show");
                return;
            }
            pageUp.classList.remove("show");
        });
    }
});

// * Input Validation.
document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll("input.is-invalid").forEach((input) => {
        let timer: NodeJS.Timeout|null = null;
        input.addEventListener("change", () => {
            const parent = input.parentElement;
            input.classList.remove("is-invalid");
            if (parent && parent.classList.contains("is-invalid")) {
                parent.classList.remove("is-invalid");
            }
        });
        input.addEventListener("input", () => {
            if (timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(() => {
                const parent = input.parentElement;
                input.classList.remove("is-invalid");
                if (parent && parent.classList.contains("is-invalid")) {
                    parent.classList.remove("is-invalid");
                }
            }, 250);
        });
    });
});