"use client";
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useMemo, useRef, useState } from "react";
import { cn } from "../../lib/utils";
import { useEditContext } from "../client/editContext";
import { usePageViewContext } from "../page-viewer/pageViewContext";
const SOURCE_WIDTH = 480;
const SOURCE_HEIGHT = 720;
const PREVIEW_SCALE = 0.2;
const PREVIEW_WIDTH = SOURCE_WIDTH * PREVIEW_SCALE;
const PREVIEW_HEIGHT = SOURCE_HEIGHT * PREVIEW_SCALE;
export function VersionPreviewCard({ itemDescriptor, version, className, }) {
    const rootRef = useRef(null);
    const [isInViewport, setIsInViewport] = useState(false);
    useEffect(() => {
        const element = rootRef.current;
        if (!element)
            return;
        if (typeof IntersectionObserver === "undefined") {
            setIsInViewport(true);
            return;
        }
        const observer = new IntersectionObserver(([entry]) => {
            setIsInViewport(!!entry?.isIntersecting);
        }, {
            root: findScrollParent(element),
            threshold: 0.01,
        });
        observer.observe(element);
        return () => observer.disconnect();
    }, []);
    return (_jsx("div", { ref: rootRef, className: cn("border-border-default relative shrink-0 overflow-hidden rounded border bg-white shadow-sm", className), "data-testid": "version-preview-card", style: { width: PREVIEW_WIDTH, height: PREVIEW_HEIGHT }, "aria-hidden": "true", children: isInViewport ? (_jsx(VersionPreviewCardContent, { itemDescriptor: itemDescriptor, version: version })) : (_jsx("div", { className: "bg-neutral-grey-5 absolute inset-0" })) }));
}
function VersionPreviewCardContent({ itemDescriptor, version, }) {
    const editContext = useEditContext();
    const [loaded, setLoaded] = useState(false);
    const descriptor = useMemo(() => ({
        id: itemDescriptor.id,
        language: itemDescriptor.language,
        version,
        database: itemDescriptor.database,
    }), [
        itemDescriptor.database,
        itemDescriptor.id,
        itemDescriptor.language,
        version,
    ]);
    const pageView = usePageViewContext({
        pageItemDescriptor: descriptor,
        itemsRepository: editContext?.itemsRepository,
        configuration: editContext?.configuration,
        parheliaSettings: editContext?.parheliaSettings,
    });
    const previewSrc = pageView.editUrl || pageView.previewUrl;
    useEffect(() => {
        setLoaded(false);
    }, [previewSrc]);
    if (!previewSrc) {
        return (_jsx("div", { className: "bg-neutral-grey-5 text-neutral-grey-50 absolute inset-0 flex items-center justify-center text-[10px]", children: "No preview" }));
    }
    return (_jsxs(_Fragment, { children: [!loaded && (_jsx("div", { className: "bg-neutral-grey-5 absolute inset-0 z-10 animate-pulse" })), _jsx("iframe", { title: `Version ${version} preview`, src: previewSrc, tabIndex: -1, loading: "lazy", onLoad: () => setLoaded(true), className: "pointer-events-none origin-top-left border-0", style: {
                    width: SOURCE_WIDTH,
                    height: SOURCE_HEIGHT,
                    transform: `scale(${PREVIEW_SCALE})`,
                } }, previewSrc)] }));
}
function findScrollParent(element) {
    let parent = element.parentElement;
    while (parent) {
        const style = window.getComputedStyle(parent);
        if (/(auto|scroll|overlay)/.test(style.overflowY)) {
            return parent;
        }
        parent = parent.parentElement;
    }
    return null;
}
//# sourceMappingURL=VersionPreviewCard.js.map