import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo, useState, useSyncExternalStore } from "react";
import { FolderPlus, LayoutGrid, Search } from "lucide-react";
import { Input } from "../../components/ui/input";
import { cn } from "../../lib/utils";
import { SimpleIconButton } from "../../editor/ui/SimpleIconButton";
import { SimpleToolbar } from "../../editor/ui/SimpleToolbar";
import { getTaskBoardNavSnapshot, subscribeTaskBoardNav, } from "../taskBoardNavStore";
export function TaskBoardProjectListSidebar() {
    const nav = useSyncExternalStore(subscribeTaskBoardNav, getTaskBoardNavSnapshot, getTaskBoardNavSnapshot);
    const [search, setSearch] = useState("");
    const [hideArchived, setHideArchived] = useState(true);
    const projects = useMemo(() => {
        const query = search.trim().toLowerCase();
        return nav.projectOptions.filter((project) => {
            if (hideArchived && project.status?.toLowerCase() === "archived") {
                return false;
            }
            if (!query)
                return true;
            const title = project.title?.toLowerCase() ?? "";
            const description = project.description?.toLowerCase() ?? "";
            const status = project.status?.toLowerCase() ?? "";
            return (title.includes(query) ||
                description.includes(query) ||
                status.includes(query));
        });
    }, [hideArchived, nav.projectOptions, search]);
    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col bg-white", "data-testid": "taskboard-project-list-sidebar", children: [_jsx(SimpleToolbar, { children: _jsx(SimpleIconButton, { onClick: () => nav.onCreateProject?.(), icon: _jsx(FolderPlus, { className: "h-4 w-4", strokeWidth: 1 }), label: "New project", "data-testid": "taskboard-project-list-create-button" }) }), _jsxs("div", { className: "border-b border-slate-200 px-3 py-2.5", children: [_jsxs("div", { className: "relative mb-2", children: [_jsx(Search, { className: "pointer-events-none absolute top-1/2 left-2.5 h-3.5 w-3.5 -translate-y-1/2 text-slate-400" }), _jsx(Input, { value: search, onChange: (event) => setSearch(event.target.value), placeholder: "Search projects...", className: "h-8 pl-8 text-xs", "data-testid": "taskboard-project-list-search" })] }), _jsxs("label", { className: "flex items-center gap-2 text-xs text-slate-600", children: [_jsx("input", { type: "checkbox", checked: hideArchived, onChange: (event) => setHideArchived(event.target.checked), "data-testid": "taskboard-project-list-hide-archived" }), "Hide archived projects"] })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto p-2", children: projects.length === 0 ? (_jsx("div", { className: "rounded-md border border-dashed px-3 py-8 text-center text-xs text-slate-400", children: "No projects found" })) : (_jsx("div", { className: "flex flex-col gap-1", children: projects.map((project) => {
                        const selected = project.projectId === nav.selectedProjectId;
                        const depth = Math.max(0, Math.min(project.depth ?? 0, 6));
                        return (_jsxs("button", { type: "button", className: cn("w-full rounded-md border px-2 py-2 text-left transition-colors", selected
                                ? "border-slate-300 bg-slate-50"
                                : "border-transparent hover:border-slate-200 hover:bg-slate-50/70"), style: { paddingLeft: `${8 + depth * 12}px` }, onClick: () => nav.onSelectProject?.(project.projectId), "data-testid": `taskboard-project-list-option-${project.projectId}`, children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(LayoutGrid, { className: "h-3.5 w-3.5 text-slate-400" }), _jsx("span", { className: "truncate text-xs font-medium text-slate-800", children: project.title })] }), project.description ? (_jsx("div", { className: "mt-0.5 line-clamp-2 pl-5 text-[10px] text-slate-500", children: project.description })) : null] }, project.projectId));
                    }) })) })] }));
}
//# sourceMappingURL=TaskBoardProjectListSidebar.js.map