import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { memo, useCallback } from 'react';
import { ChevronRight, ChevronDown, FolderOpen, Folder, FileCode, FolderTree, RefreshCw, } from 'lucide-react';
import { useFileBrowserStore } from '../../stores/fileBrowserStore';
import { usePanelWidthStore } from '../../stores/panelWidthStore';
import { useFileTree } from '../../hooks/useFileBrowser';
import { Button } from '../ui/Button';
import { ResizeHandle } from '../ui/ResizeHandle';
const PANEL_KEY = 'file-browser';
const DEFAULT_WIDTH = 320;
const MIN_WIDTH = 280;
const MAX_WIDTH = 600;
function TreeDirectory({ dirPath }) {
    const expandedDirs = useFileBrowserStore((s) => s.expandedDirs);
    const isExpanded = expandedDirs.has(dirPath);
    const { data, isLoading } = useFileTree(dirPath, isExpanded);
    if (!isExpanded)
        return null;
    if (isLoading) {
        return (_jsx("div", { className: "pl-4 py-1 text-xs text-muted-foreground", children: "Loading..." }));
    }
    return (_jsx("div", { className: "pl-3", children: data?.items.map((item) => (_jsx(TreeItem, { name: item.name, path: item.path, type: item.type, gitignored: item.gitignored }, item.path))) }));
}
function TreeItem({ name, path, type, gitignored, }) {
    const expandedDirs = useFileBrowserStore((s) => s.expandedDirs);
    const toggleDir = useFileBrowserStore((s) => s.toggleDir);
    const openFile = useFileBrowserStore((s) => s.openFile);
    const selectedFile = useFileBrowserStore((s) => s.selectedFile);
    const isExpanded = expandedDirs.has(path);
    const isSelected = selectedFile === path;
    const handleClick = useCallback(() => {
        if (type === 'directory') {
            toggleDir(path);
        }
        else {
            openFile(path);
        }
    }, [type, path, toggleDir, openFile]);
    return (_jsxs("div", { children: [_jsxs("button", { type: "button", onClick: handleClick, className: `w-full text-left flex items-center gap-1.5 px-2 py-1 text-sm hover:bg-muted/50 rounded transition-colors ${isSelected ? 'bg-muted text-foreground' : 'text-foreground/80'} ${gitignored ? 'opacity-40' : ''}`, children: [type === 'directory' ? (_jsxs(_Fragment, { children: [isExpanded ? (_jsx(ChevronDown, { className: "w-3 h-3 text-muted-foreground flex-shrink-0" })) : (_jsx(ChevronRight, { className: "w-3 h-3 text-muted-foreground flex-shrink-0" })), isExpanded ? (_jsx(FolderOpen, { className: "w-3.5 h-3.5 text-blue-500 flex-shrink-0" })) : (_jsx(Folder, { className: "w-3.5 h-3.5 text-blue-500 flex-shrink-0" }))] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "w-3 flex-shrink-0" }), _jsx(FileCode, { className: "w-3.5 h-3.5 text-muted-foreground flex-shrink-0" })] })), _jsx("span", { className: "truncate", children: name })] }), type === 'directory' && _jsx(TreeDirectory, { dirPath: path })] }));
}
export const FileBrowserSidebar = memo(function FileBrowserSidebar() {
    const isExpanded = useFileBrowserStore((s) => s.isExpanded);
    const collapseSidebar = useFileBrowserStore((s) => s.collapseSidebar);
    const panelWidth = usePanelWidthStore((s) => s.widths[PANEL_KEY] ?? DEFAULT_WIDTH);
    const { data: rootData, isLoading, refetch } = useFileTree('.');
    if (!isExpanded)
        return null;
    return (_jsxs("div", { className: "border-l border-border bg-background flex h-full relative", style: { width: panelWidth }, children: [_jsx(ResizeHandle, { panelKey: PANEL_KEY, side: "right", minWidth: MIN_WIDTH, maxWidth: MAX_WIDTH, defaultWidth: DEFAULT_WIDTH }), _jsxs("div", { className: "flex-1 flex flex-col h-full min-w-0", children: [_jsxs("div", { className: "h-14 border-b border-border px-3 flex items-center justify-between shrink-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(FolderTree, { className: "w-4 h-4 text-muted-foreground" }), _jsx("span", { className: "font-medium", children: "Files" })] }), _jsx(Button, { variant: "ghost", size: "icon", onClick: collapseSidebar, children: _jsx(ChevronRight, { className: "w-4 h-4" }) })] }), _jsx("div", { className: "flex-1 overflow-y-auto p-1", children: isLoading ? (_jsx("div", { className: "p-4 text-sm text-muted-foreground", children: "Loading file tree..." })) : !rootData || rootData.items.length === 0 ? (_jsx("div", { className: "p-4 text-sm text-muted-foreground", children: "No files found" })) : (rootData.items.map((item) => (_jsx(TreeItem, { name: item.name, path: item.path, type: item.type, gitignored: item.gitignored }, item.path)))) }), _jsxs("div", { className: "h-12 px-4 border-t border-border text-xs text-muted-foreground flex items-center justify-between gap-2", children: [_jsxs("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: [_jsx(FolderTree, { className: "w-3 h-3 flex-shrink-0" }), _jsx("span", { className: "truncate", children: "Project Files" })] }), _jsx(Button, { variant: "ghost", size: "icon", onClick: () => refetch(), title: "Refresh file tree", className: "h-6 w-6 flex-shrink-0", disabled: isLoading, children: _jsx(RefreshCw, { className: `w-3 h-3 ${isLoading ? 'animate-spin' : ''}` }) })] })] })] }));
});
//# sourceMappingURL=FileBrowserSidebar.js.map