import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useSyncExternalStore } from "react";
import { ChevronDown, LayoutGrid } from "lucide-react";
import { Button } from "../../components/ui/button";
import { BreadcrumbPageSubtitle } from "../../components/ui/breadcrumb";
import { Popover, PopoverContent, PopoverTrigger, } from "../../components/ui/popover";
import { cn } from "../../lib/utils";
import { getTaskBoardNavSnapshot, subscribeTaskBoardNav, } from "../taskBoardNavStore";
import { ProjectListContent } from "./ProjectListContent";
export function TaskBoardProjectSelector({ variant = "button", label, subtitle, className, }) {
    const nav = useSyncExternalStore(subscribeTaskBoardNav, getTaskBoardNavSnapshot, getTaskBoardNavSnapshot);
    const [open, setOpen] = useState(false);
    const triggerLabel = label ??
        (nav.selectedProjectId
            ? nav.projectTitle || "Selected project"
            : "Select project");
    const trigger = variant === "breadcrumb" ? (_jsx("button", { type: "button", className: cn("group focus-visible:ring-ring hover:text-neutral-grey-100 flex max-w-[320px] min-w-0 items-start gap-1.5 rounded-sm p-0 text-left leading-tight transition-colors outline-none focus-visible:ring-2 focus-visible:ring-offset-2", className), "data-testid": "taskboard-project-selector-trigger", children: _jsxs("span", { className: "flex min-w-0 flex-col items-start gap-0", children: [_jsxs("span", { className: "flex w-full min-w-0 items-center gap-1.5", children: [_jsx("span", { className: "text-neutral-grey-100 min-w-0 truncate font-medium", children: triggerLabel }), _jsx(ChevronDown, { className: "text-neutral-grey-50 group-hover:text-neutral-grey-50 h-3.5 w-3.5 flex-none transition-colors" })] }), subtitle ? (_jsx(BreadcrumbPageSubtitle, { className: "hidden w-full min-w-0 truncate text-[11px] leading-tight md:block", children: subtitle })) : null] }) })) : (_jsxs(Button, { variant: "outline", size: "sm", className: cn("text-neutral-grey-100 h-8 max-w-[320px] justify-between gap-2 px-2.5", className), "data-testid": "taskboard-project-selector-trigger", children: [_jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [_jsx(LayoutGrid, { className: "text-neutral-grey-50 h-3.5 w-3.5 flex-none" }), _jsx("span", { className: "truncate", children: triggerLabel })] }), _jsx(ChevronDown, { className: "text-neutral-grey-50 h-3.5 w-3.5 flex-none" })] }));
    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: trigger }), _jsx(PopoverContent, { align: "start", className: "w-[min(420px,calc(100vw-2rem))] p-0", "data-testid": "taskboard-project-popover", children: _jsx(ProjectListContent, { nav: nav, onProjectSelected: () => setOpen(false), maxHeight: 420 }) })] }));
}
//# sourceMappingURL=TaskBoardProjectSelector.js.map