"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 { RecentPages } from "./RecentPages";
import { Network } from "lucide-react";
import ItemSearch from "../editor/ui/ItemSearch";
import { localStorageService } from "../editor/services/localStorageService";
import { CloseButton } from "../components/ui/close-button";
const dialogCardTitleClassName = "text-sm md:text-[15px]";
const dialogCardDescriptionClassName = "text-[11px] md:text-xs";
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: "bg-neutral-grey-5 flex h-full items-center justify-center", 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-5", 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-grey-100", children: [_jsx("div", { className: "from-neutral-grey-100 to-neutral-grey-50 bg-linear-to-r bg-clip-text text-lg font-bold tracking-tight text-transparent md:text-2xl", children: "Open Page" }), _jsx("div", { className: "text-neutral-grey-50 mt-1 text-[11px] font-medium md:text-xs", children: "Browse your content structure or access recently viewed pages" })] }) }), _jsx("div", { className: "mr-8 flex items-start gap-2", children: !onClose && (_jsx(CloseButton, { 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);
                                }, label: "Close" })) })] }), _jsxs("div", { className: "flex min-h-0 flex-1 gap-6 text-xs md:flex-row", children: [_jsx("div", { className: "flex w-full flex-col md:w-80 lg:w-96", children: _jsx(Card, { icon: _jsx(Network, { className: "h-4 w-4" }), title: "Browse Content", description: "Navigate structure", titleClassName: dialogCardTitleClassName, descriptionClassName: dialogCardDescriptionClassName, noPadding: true, className: "flex flex-1 flex-col overflow-hidden", children: _jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-2 px-4 py-2", children: [_jsx(ItemSearch, { setHoveredItem: setHoveredItem, itemSelected: (item) => {
                                                loadItem(item);
                                            } }), _jsx("div", { className: "relative min-h-0 flex-1 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 min-h-0 flex-1 flex-col overflow-hidden", children: _jsx(RecentPages, { onClose: onClose }) })] })] }));
    };
    return (_jsx("div", { className: "bg-neutral-grey-5 flex h-full flex-col p-4 text-xs md:p-7", children: renderContent() }));
}
//# sourceMappingURL=OpenPage.js.map