import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from "react";
import { useEditContext } from "../../client/editContext";
import { SimpleIconButton } from "../../ui/SimpleIconButton";
import { getUndoCommand, getRedoCommand } from "../../commands/undo";
export function UndoRedoControls() {
    const editContext = useEditContext();
    // Filter operations based on historyMode and showOnlyMyChanges
    const filterOperation = useMemo(() => {
        if (!editContext)
            return () => false;
        const filterBySession = editContext.showOnlyMyChanges;
        const currentItem = editContext.item?.descriptor;
        const historyMode = editContext.historyMode;
        return (op) => {
            // Session filter (showOnlyMyChanges)
            if (filterBySession && op.sessionId !== editContext.sessionId) {
                return false;
            }
            // Page-centric filter: only show operations for current item and language (any version)
            // EXCEPTION: delete-items operations are always shown because after deleting an item,
            // the user navigates to parent but should still be able to undo the deletion
            if (historyMode === "page-centric" &&
                currentItem &&
                op.type !== "delete-items") {
                if (!op.mainItem ||
                    op.mainItem.id !== currentItem.id ||
                    op.mainItem.language !== currentItem.language) {
                    return false;
                }
            }
            // Current-version filter: only show operations for current item and version
            if (historyMode === "current-version" && currentItem) {
                if (!op.mainItem ||
                    op.mainItem.id !== currentItem.id ||
                    op.mainItem.version !== currentItem.version) {
                    return false;
                }
            }
            return true;
        };
    }, [
        editContext?.showOnlyMyChanges,
        editContext?.sessionId,
        editContext?.historyMode,
        editContext?.item?.descriptor?.id,
        editContext?.item?.descriptor?.language,
        editContext?.item?.descriptor?.version,
    ]);
    // Get the next undoable operation (first operation where canUndo is true)
    const nextUndoOperation = useMemo(() => {
        if (!editContext)
            return undefined;
        const allOps = editContext.editHistory || [];
        const undoableOps = allOps.filter((x) => x.canUndo);
        const filteredOps = undoableOps.filter(filterOperation);
        const result = filteredOps[0];
        return result;
    }, [editContext?.editHistory, filterOperation]);
    // Get the next redoable operation (last operation where canRedo is true)
    const nextRedoOperation = useMemo(() => {
        if (!editContext)
            return undefined;
        const filteredRedoable = editContext.editHistory.filter((x) => x.canRedo && filterOperation(x));
        const result = [...editContext.editHistory]
            .reverse()
            .find((x) => x.canRedo && filterOperation(x));
        return result;
    }, [editContext?.editHistory, filterOperation]);
    if (!editContext)
        return null;
    const undoCommand = getUndoCommand();
    const redoCommand = getRedoCommand();
    // Build dynamic tooltip labels
    const undoLabel = nextUndoOperation
        ? `Undo: ${nextUndoOperation.title}`
        : "Undo";
    const redoLabel = nextRedoOperation
        ? `Redo: ${nextRedoOperation.title}`
        : "Redo";
    return (_jsxs(_Fragment, { children: [_jsx(SimpleIconButton, { onClick: async (ev) => {
                    // Pass the operation ID from current React state to avoid stale ref issues
                    // Await to ensure the operation completes before the click handler returns
                    await editContext.executeCommand({
                        command: undoCommand,
                        event: ev,
                        data: { operationId: nextUndoOperation?.id },
                    });
                }, icon: undoCommand.icon, label: undoLabel, size: "large", "data-testid": "toolbar-undo-button", disabled: editContext.isCommandDisabled({ command: undoCommand }) }), _jsx(SimpleIconButton, { onClick: async (ev) => {
                    // Pass the operation ID from current React state to avoid stale ref issues
                    // Await to ensure the operation completes before the click handler returns
                    await editContext.executeCommand({
                        command: redoCommand,
                        event: ev,
                        data: { operationId: nextRedoOperation?.id },
                    });
                }, icon: redoCommand.icon, label: redoLabel, size: "large", "data-testid": "toolbar-redo-button", disabled: editContext.isCommandDisabled({ command: redoCommand }) })] }));
}
//# sourceMappingURL=UndoRedoControls.js.map