import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Center } from "@vertesia/ui/core";
import clsx from "clsx";
import { AtSignIcon, ChevronsDown, ChevronsUp, ImageIcon, InfoIcon } from "lucide-react";
import { useRef, useState } from "react";
import { usePdfPagesInfo } from "./PdfPageProvider";
var ImageType;
(function (ImageType) {
    ImageType[ImageType["default"] = 0] = "default";
    ImageType[ImageType["original"] = 1] = "original";
    ImageType[ImageType["instrumented"] = 2] = "instrumented";
    ImageType[ImageType["annotated"] = 3] = "annotated";
})(ImageType || (ImageType = {}));
export function PageSlider({ className, currentPage, onChange, object }) {
    const getProcessorType = () => {
        if (object.metadata?.type === "document") {
            const docMetadata = object.metadata;
            return docMetadata.content_processor?.type || "xml";
        }
        return "xml"; // default
    };
    const getDefaultImageType = () => {
        const processorType = getProcessorType();
        return processorType === "markdown" ? ImageType.original : ImageType.default;
    };
    const [imageType, setImageType] = useState(getDefaultImageType());
    const ref = useRef(null);
    const { urls, originalUrls, annotatedUrls, instrumentedUrls } = usePdfPagesInfo();
    const goPrev = () => {
        if (currentPage > 1) {
            onChange(currentPage - 1);
            if (ref.current) {
                ref.current.querySelector(`div[data-index="${currentPage - 1}"]`)?.scrollIntoView({
                    behavior: 'smooth',
                    block: 'end',
                    inline: 'center'
                });
            }
        }
    };
    const goNext = () => {
        if (currentPage < urls.length) {
            onChange(currentPage + 1);
            if (ref.current) {
                ref.current.querySelector(`div[data-index="${currentPage + 1}"]`)?.scrollIntoView({
                    behavior: 'smooth',
                    block: 'end',
                    inline: 'center'
                });
            }
        }
    };
    const actualUrls = imageType === ImageType.instrumented ? instrumentedUrls :
        (imageType === ImageType.annotated ? annotatedUrls :
            (imageType === ImageType.original ? originalUrls : urls));
    return (_jsxs("div", { ref: ref, className: clsx('flex flex-col items-stretch gap-y-2', className), children: [_jsxs("div", { className: "flex h-5 items-center justify-center relative", children: [_jsx("button", { className: BTN_CLASS, onClick: goPrev, children: _jsx(ChevronsUp, { className: 'w-5 h-5' }) }), _jsx("div", { className: "absolute right-3 flex gap-x-1", children: getProcessorType() === "markdown" ? (_jsxs(_Fragment, { children: [_jsx("button", { className: getRadioButtonClass(ImageType.original, imageType), onClick: () => setImageType(ImageType.original), children: _jsx(ImageIcon, { className: "w-5 h-5 mt-1" }) }), _jsx("button", { className: getRadioButtonClass(ImageType.instrumented, imageType), onClick: () => setImageType(ImageType.instrumented), children: _jsx(InfoIcon, { className: "w-5 h-5 mt-1" }) })] })) : (_jsxs(_Fragment, { children: [_jsx("button", { className: getRadioButtonClass(ImageType.default, imageType), onClick: () => setImageType(ImageType.default), children: _jsx(ImageIcon, { className: "w-5 h-5 mt-1" }) }), _jsx("button", { className: getRadioButtonClass(ImageType.instrumented, imageType), onClick: () => setImageType(ImageType.instrumented), children: _jsx(InfoIcon, { className: "w-5 h-5 mt-1" }) }), _jsx("button", { className: getRadioButtonClass(ImageType.annotated, imageType), onClick: () => setImageType(ImageType.annotated), children: _jsx(AtSignIcon, { className: "w-5 h-5 mt-1" }) })] })) })] }), _jsx("div", { className: 'flex flex-col items-center gap-2 flex-1 overflow-y-auto px-2', children: actualUrls.map((url, index) => _jsx(PageThumbnail, { url: url, currentPage: currentPage, pageNumber: index + 1, onSelect: () => onChange(index + 1) }, index)) }), _jsx("div", { className: "flex h-5 items-center justify-center relative", children: _jsx("button", { className: BTN_CLASS, onClick: goNext, children: _jsx(ChevronsDown, { className: 'size-5' }) }) })] }));
}
function PageThumbnail({ url, pageNumber, currentPage, onSelect }) {
    return (_jsxs("div", { className: "p-2 hover:bg-gray-200 dark:hover:bg-slate-600 rounded-md", "data-index": pageNumber - 1, children: [_jsx("div", { className: clsx('relative border-[2px] cursor-pointer', pageNumber === currentPage ? "border-blue-500 dark:border-pink-400" : "border-gray-300"), onClick: onSelect, children: _jsx("img", { src: url, alt: `Page ${pageNumber}` }) }), _jsx(Center, { className: "text-sm text-gray-500 dark:text-gray-400 pt-1 font-semibold align", children: pageNumber })] }));
}
const BTN_CLASS = "cursor-pointer text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500 hover:font-semibold";
function getRadioButtonClass(type, currentType) {
    if (type === currentType) {
        return '${BTN_CLASS} text-pink-600';
    }
    else {
        return `${BTN_CLASS}`;
    }
}
//# sourceMappingURL=PageSlider.js.map