"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from "react";
import { useEditContext } from "../editor/client/editContext";
import { ScrollingContentTree } from "../editor/ScrollingContentTree";
import { Spinner } from "../editor/ui/Spinner";
import { Card } from "../components/ui/card";
import { ActionButton } from "../components/ActionButton";
import { RecentPages } from "./RecentPages";
import { X, Network, Plus } from "lucide-react";
import ItemSearch from "../editor/ui/ItemSearch";
import { localStorageService } from "../editor/services/localStorageService";
export function OpenPage({ onClose, onNavigateToNewPage, }) {
    const [selectedPage, setSelectedPage] = useState(null);
    const editContext = useEditContext();
    const recentPages = localStorageService.getOrSetItem("editor.browseHistory", []);
    const [isLoading, setIsLoading] = useState(false);
    const [hoveredItem, setHoveredItem] = useState();
    useEffect(() => {
        if (recentPages.length > 0 && recentPages[0])
            setSelectedPage(recentPages[0]);
    }, []);
    if (isLoading) {
        return (_jsx("div", { className: "flex h-full items-center justify-center bg-gray-100", children: _jsx(Spinner, {}) }));
    }
    const loadItem = (item) => {
        setIsLoading(true);
        if (onClose) {
            onClose();
        }
        editContext?.switchWorkspace("editor");
        editContext
            ?.loadItem({
            id: item.id,
            language: item.language ?? "en",
            version: item.version,
        })
            .finally(() => {
            setIsLoading(false);
        });
    };
    const renderContent = () => {
        return (_jsxs("div", { className: "flex h-full flex-col gap-6", children: [_jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsx("div", { className: "flex items-center gap-4", children: _jsxs("div", { className: "text-neutral-800", children: [_jsx("div", { className: "text-lg font-bold md:text-3xl tracking-tight bg-clip-text text-transparent bg-linear-to-r from-slate-900 to-slate-600", children: "Open Page" }), _jsx("div", { className: "mt-1 text-xs font-medium text-slate-500 md:text-sm", children: "Browse your content structure or access recently viewed pages" })] }) }), _jsxs("div", { className: "flex items-start gap-2 mr-8", children: [_jsxs(ActionButton, { onClick: () => {
                                        if (onNavigateToNewPage) {
                                            onNavigateToNewPage();
                                        }
                                        else {
                                            editContext?.switchWorkspace("new-page");
                                        }
                                    }, className: "bg-purple-600 hover:bg-purple-700 text-white shadow-lg shadow-purple-200", isLoading: false, children: ["Create New Page ", _jsx(Plus, { className: "ml-2 h-4 w-4" })] }), !onClose && (_jsx(ActionButton, { onClick: () => {
                                        // If previous view is also a modal (new-page/open-page), go back to home
                                        const prevWorkspace = editContext?.previousWorkspaceId;
                                        const targetWorkspace = prevWorkspace === "new-page" || prevWorkspace === "open-page"
                                            ? "home"
                                            : prevWorkspace || "home";
                                        editContext?.switchWorkspace(targetWorkspace);
                                    }, variant: "ghost", className: "p-2", "aria-label": "Close", children: _jsx(X, { className: "h-4 w-4" }) }))] })] }), _jsxs("div", { className: "flex flex-1 gap-6 text-sm md:flex-row min-h-0", children: [_jsx("div", { className: "w-full md:w-80 lg:w-96 flex flex-col", children: _jsx(Card, { icon: _jsx(Network, { className: "h-4 w-4" }), title: "Browse Content", description: "Navigate structure", noPadding: true, className: "flex-1 flex flex-col overflow-hidden", children: _jsxs("div", { className: "flex flex-1 flex-col gap-2 px-4 py-2 min-h-0", children: [_jsx(ItemSearch, { setHoveredItem: setHoveredItem, itemSelected: (item) => {
                                                loadItem(item);
                                            } }), _jsx("div", { className: "relative flex-1 min-h-0 overflow-y-auto", children: _jsx(ScrollingContentTree, { selectedItemId: hoveredItem?.id ?? selectedPage?.id, hideRootNodes: true, onSelectionChange: (selection) => {
                                                    const selectedItem = selection[0];
                                                    if (selectedItem) {
                                                        loadItem(selectedItem);
                                                    }
                                                } }) })] }) }) }), _jsx("div", { className: "flex-1 flex flex-col min-h-0 overflow-hidden", children: _jsx(RecentPages, { onClose: onClose }) })] })] }));
    };
    return (_jsx("div", { className: "flex h-full flex-col bg-gray-100 p-4 md:p-8", children: renderContent() }));
}
//# sourceMappingURL=OpenPage.js.map