import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Pagination, usePagination } from "@powerhousedao/design-system";
import { garbageCollect, sortOperations } from "document-model/core";
import { useMemo, useState } from "react";
import { ConnectTooltipProvider } from "../tooltip/tooltip.js";
import { Header } from "./header/header.js";
import { Timeline } from "./timeline/timeline.js";
export function RevisionHistory(props) {
    const { documentTitle, documentId, globalOperations, localOperations, onClose, itemsPerPage = 100, documentState, onCopyState, onCopyDocId, } = props;
    const [scope, setScope] = useState("global");
    const visibleOperations = useMemo(() => {
        const operations = scope === "global" ? globalOperations : localOperations;
        return garbageCollect(sortOperations(operations)).sort((a, b) => b.index - a.index);
    }, [globalOperations, localOperations, scope]);
    const { pageItems, pages, goToPage, goToNextPage, goToPreviousPage, goToFirstPage, goToLastPage, hiddenNextPages, isNextPageAvailable, isPreviousPageAvailable, } = usePagination(visibleOperations, {
        itemsPerPage,
    });
    function onChangeScope(scope) {
        goToFirstPage();
        setScope(scope);
    }
    const showPagination = visibleOperations.length > itemsPerPage;
    const PaginationComponent = showPagination ? (_jsx("div", { className: "mt-4 flex w-full justify-end", children: _jsx(Pagination, { firstPageLabel: "First Page", goToFirstPage: goToFirstPage, goToLastPage: goToLastPage, goToNextPage: goToNextPage, goToPage: goToPage, goToPreviousPage: goToPreviousPage, hiddenNextPages: hiddenNextPages, isNextPageAvailable: isNextPageAvailable, isPreviousPageAvailable: isPreviousPageAvailable, lastPageLabel: "Last Page", nextPageLabel: "Next", pages: pages, previousPageLabel: "Previous" }) })) : (_jsx("hr", { className: "h-12 border-none" }));
    return (_jsx(ConnectTooltipProvider, { children: _jsxs("div", { className: "p-6", children: [_jsx(Header, { docId: documentId, onChangeScope: onChangeScope, onClose: onClose, scope: scope, title: documentTitle, documentState: documentState, onCopyState: onCopyState, onCopyDocId: onCopyDocId }), PaginationComponent, _jsx("div", { className: "mt-4 flex justify-center rounded-md bg-slate-50 p-4", children: visibleOperations.length > 0 ? (_jsx("div", { className: "grid grid-cols-[minmax(min-content,1018px)]", children: _jsx(Timeline, { globalOperations: scope === "global" ? pageItems : [], localOperations: scope === "local" ? pageItems : [], scope: scope }) })) : (_jsx("h3", { className: "my-40 text-gray-600", children: "This document has no recorded operations yet." })) }), PaginationComponent] }) }));
}
//# sourceMappingURL=revision-history.js.map