import React from 'react';

/**
 * historyVisual.ts — Visual undo/redo history for editors.
 *
 * Provides a visual timeline showing thumbnails/labels for each history entry,
 * allowing users to click on any point to jump to that state.
 */
// ── Hook ────────────────────────────────────────────────────────
let nextHistoryId = 1;
/** React hook for visual undo/redo history management. */
function useVisualHistory(maxEntries = 100) {
    const [state, setState] = React.useState({
        entries: [],
        currentIndex: -1,
    });
    const push = React.useCallback((label, snapshot, thumbnail) => {
        setState((prev) => {
            // Trim redo stack
            const entries = prev.entries.slice(0, prev.currentIndex + 1);
            const entry = {
                id: nextHistoryId++,
                label,
                timestamp: Date.now(),
                thumbnail,
                state: snapshot,
            };
            entries.push(entry);
            // Enforce max
            while (entries.length > maxEntries)
                entries.shift();
            return { entries, currentIndex: entries.length - 1 };
        });
    }, [maxEntries]);
    const undo = React.useCallback(() => {
        let result = null;
        setState((prev) => {
            if (prev.currentIndex <= 0)
                return prev;
            const newIndex = prev.currentIndex - 1;
            result = prev.entries[newIndex].state;
            return { ...prev, currentIndex: newIndex };
        });
        return result;
    }, []);
    const redo = React.useCallback(() => {
        let result = null;
        setState((prev) => {
            if (prev.currentIndex >= prev.entries.length - 1)
                return prev;
            const newIndex = prev.currentIndex + 1;
            result = prev.entries[newIndex].state;
            return { ...prev, currentIndex: newIndex };
        });
        return result;
    }, []);
    const jumpTo = React.useCallback((index) => {
        let result = null;
        setState((prev) => {
            if (index < 0 || index >= prev.entries.length)
                return prev;
            result = prev.entries[index].state;
            return { ...prev, currentIndex: index };
        });
        return result;
    }, []);
    const clear = React.useCallback(() => {
        setState({ entries: [], currentIndex: -1 });
    }, []);
    return {
        push,
        undo,
        redo,
        jumpTo,
        getState: () => state,
        canUndo: state.currentIndex > 0,
        canRedo: state.currentIndex < state.entries.length - 1,
        count: state.entries.length,
        currentIndex: state.currentIndex,
        entries: state.entries,
        clear,
    };
}
/** Visual history timeline panel showing entries with thumbnails. */
function VisualHistoryPanel({ history, onJump, className = "", style, }) {
    const handleClick = (index) => {
        const state = history.jumpTo(index);
        if (state !== null && onJump)
            onJump(state);
    };
    return React.createElement("div", {
        className: `nice-visual-history ${className}`,
        style: { display: "flex", flexDirection: "column", gap: 2, padding: 4, ...style },
    }, React.createElement("div", {
        style: { display: "flex", justifyContent: "space-between", marginBottom: 4, fontSize: 11 },
    }, React.createElement("strong", null, "History"), React.createElement("span", { style: { opacity: 0.6 } }, `${history.currentIndex + 1} / ${history.count}`)), React.createElement("div", {
        style: { display: "flex", flexDirection: "column", gap: 1, overflowY: "auto", maxHeight: 300 },
    }, history.entries.map((entry, idx) => React.createElement("div", {
        key: entry.id,
        onClick: () => handleClick(idx),
        style: {
            display: "flex",
            alignItems: "center",
            gap: 4,
            padding: "3px 6px",
            cursor: "pointer",
            fontSize: 11,
            borderRadius: 3,
            background: idx === history.currentIndex ? "rgba(59,130,246,0.15)" : "transparent",
            fontWeight: idx === history.currentIndex ? 600 : 400,
            opacity: idx > history.currentIndex ? 0.4 : 1,
        },
    }, entry.thumbnail && React.createElement("img", {
        src: entry.thumbnail,
        alt: "",
        style: { width: 24, height: 24, borderRadius: 2, objectFit: "cover" },
    }), React.createElement("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, entry.label)))));
}

export { VisualHistoryPanel, useVisualHistory };
//# sourceMappingURL=historyVisual.js.map
