"use client";
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEditContext } from "../client/editContext";
import { useEffect, useMemo, useState } from "react";
import { SimpleIconButton } from "../ui/SimpleIconButton";
import { User, Globe, FileText, GitCommit, AlignLeft, Languages, } from "lucide-react";
import { SimpleToolbar } from "../ui/SimpleToolbar";
import { OperationItem } from "./OperationItem";
import { TimelineView } from "./TimelineView";
import { localStorageService } from "../services/localStorageService";
import { SearchInput } from "../../components/SearchInput";
import { LoadingState } from "../ui/LoadingState";
import { Button } from "../../components/ui/button";
import { Spinner } from "../ui/Spinner";
export function EditHistory() {
    const editContext = useEditContext();
    const [showDescriptions, setShowDescriptions] = useState(() => {
        // Load from localStorage if available, default to true
        const saved = localStorageService.getString("editHistory.showDescriptions");
        return saved !== null ? saved === "true" : true;
    });
    const [history, setHistory] = useState([]);
    if (!editContext)
        return;
    // Persist showDescriptions to localStorage when it changes
    useEffect(() => {
        localStorageService.setString("editHistory.showDescriptions", String(showDescriptions));
    }, [showDescriptions]);
    // History is now loaded by EditorShell based on mode and showOnlyMyChanges
    // Just filter out undone operations for display
    useEffect(() => {
        if (!editContext.editHistory || editContext.editHistory.length === 0) {
            setHistory([]);
            return;
        }
        const operations = editContext.editHistory;
        setHistory(operations);
    }, [editContext.editHistory]);
    const searchQuery = editContext.historySearchQuery;
    const hasSearchQuery = searchQuery.trim().length > 0;
    const visibleHistory = useMemo(() => {
        const q = searchQuery.trim().toLowerCase();
        if (!q)
            return history;
        return history.filter((operation) => {
            const path = (operation.mainItemPath ||
                operation.mainItem?.path ||
                "").toLowerCase();
            const title = (operation.title || "").toLowerCase();
            const description = (operation.description || "").toLowerCase();
            return path.includes(q) || title.includes(q) || description.includes(q);
        });
    }, [history, searchQuery]);
    const showLoadMore = editContext.historyMode === "global" &&
        editContext.canLoadMoreHistory &&
        visibleHistory.length > 0;
    return (_jsxs("div", { className: "absolute inset-0 flex flex-col", children: [_jsxs(SimpleToolbar, { children: [_jsx(SimpleIconButton, { selected: editContext.historyMode === "global", onClick: () => {
                            if (editContext.setHistoryMode) {
                                editContext.setHistoryMode("global");
                            }
                        }, icon: _jsx(Globe, { className: "h-4 w-4", strokeWidth: 1 }), label: "Global", "data-testid": "history-mode-global-button" }), _jsx(SimpleIconButton, { selected: editContext.historyMode === "page-centric", onClick: () => {
                            if (editContext.setHistoryMode) {
                                editContext.setHistoryMode("page-centric");
                            }
                        }, icon: _jsx(FileText, { className: "h-4 w-4", strokeWidth: 1 }), label: "Current page", "data-testid": "history-mode-page-centric-button" }), _jsx(SimpleIconButton, { selected: editContext.historyMode === "current-version", onClick: () => {
                            if (editContext.setHistoryMode) {
                                editContext.setHistoryMode("current-version");
                            }
                        }, icon: _jsx(GitCommit, { className: "h-4 w-4", strokeWidth: 1 }), label: "Current version", "data-testid": "history-mode-current-version-button" }), _jsx("div", { className: "bg-border-default mx-1 h-4 w-px" }), _jsx(SimpleIconButton, { selected: editContext.showOnlyMyChanges, onClick: () => editContext.setShowOnlyMyChanges(!editContext.showOnlyMyChanges), icon: _jsx(User, { className: "h-4 w-4", strokeWidth: 1 }), label: "Show only my changes", "data-testid": "history-show-only-my-changes-button" }), editContext.historyMode === "global" && (_jsx(SimpleIconButton, { selected: editContext.filterByCurrentLanguage, onClick: () => editContext.setFilterByCurrentLanguage(!editContext.filterByCurrentLanguage), icon: _jsx(Languages, { className: "h-4 w-4", strokeWidth: 1 }), label: "Filter by current language", "data-testid": "history-filter-by-language-button" })), _jsx(SimpleIconButton, { selected: showDescriptions, onClick: () => setShowDescriptions(!showDescriptions), icon: _jsx(AlignLeft, { className: "h-4 w-4", strokeWidth: 1 }), label: "Show descriptions", "data-testid": "history-show-descriptions-button" })] }), _jsx("div", { className: "border-border-default border-b p-2", "data-testid": "history-search-input", children: _jsx(SearchInput, { value: searchQuery, onChange: editContext.setHistorySearchQuery, onClear: () => editContext.setHistorySearchQuery(""), placeholder: "Search history...", className: "w-full", loading: editContext.isHistoryLoading || editContext.isHistoryLoadingMore }) }), _jsx("div", { className: "flex flex-1 flex-col overflow-x-hidden overflow-y-auto text-sm", children: editContext.isHistoryLoading ? (_jsx(LoadingState, { variant: "fill", spinnerSize: "lg", message: "Loading history..." })) : visibleHistory.length === 0 ? (_jsx("div", { className: "text-neutral-grey-50 p-4 text-center text-xs", children: hasSearchQuery
                        ? `No history matches "${searchQuery.trim()}"`
                        : "No edit history available" })) : (_jsxs(_Fragment, { children: [editContext.historyMode === "page-centric" ? (_jsx(TimelineView, { operations: visibleHistory, showUserName: !editContext.showOnlyMyChanges, showDescription: showDescriptions })) : (visibleHistory.map((o, i) => (_jsx(OperationItem, { operation: o, index: i, showUserName: !editContext.showOnlyMyChanges, showDescription: showDescriptions, hidePath: editContext.historyMode !== "global", showLanguage: editContext.historyMode === "global" }, o.id || i)))), showLoadMore && (_jsx("div", { className: "border-border-default flex justify-center border-t bg-white px-3 py-3", children: _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => void editContext.loadMoreHistory(), disabled: editContext.isHistoryLoadingMore, "data-testid": "history-load-more-button", children: [editContext.isHistoryLoadingMore && _jsx(Spinner, { size: "xs" }), editContext.isHistoryLoadingMore
                                        ? "Loading more..."
                                        : "Load more"] }) }))] })) })] }));
}
//# sourceMappingURL=EditHistory.js.map