import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Icon } from "@powerhousedao/design-system";
import { useState } from "react";
import { twMerge } from "tailwind-merge";
const INDENT_PX = 16;
function TreeItem({ label, depth, expanded, selected, hasChildren, icon, onToggle, onClick, children, }) {
    const handleChevronClick = (e) => {
        e.stopPropagation();
        onToggle?.();
    };
    return (_jsxs("div", { children: [_jsxs("div", { className: twMerge("flex cursor-pointer items-center gap-1 py-1 pr-2 text-sm hover:bg-gray-100", selected && "bg-blue-50"), style: { paddingLeft: depth * INDENT_PX + 4 }, onClick: onClick, children: [hasChildren ? (_jsx("button", { className: "flex h-4 w-4 shrink-0 items-center justify-center text-gray-500 hover:text-gray-700", onClick: handleChevronClick, type: "button", children: _jsx(Icon, { className: twMerge("transition-transform", expanded && "rotate-90"), name: "CaretRight", size: 12 }) })) : (_jsx("span", { className: "w-4 shrink-0" })), icon && _jsx("span", { className: "shrink-0 text-gray-500", children: icon }), _jsx("span", { className: "min-w-0 flex-1 truncate text-gray-700", children: label }), selected && (_jsx("span", { className: "ml-auto h-2 w-2 shrink-0 rounded-full bg-blue-500" }))] }), expanded && children] }));
}
function ColumnItem({ column, depth, }) {
    const typeLabel = column.dataType.length > 10
        ? column.dataType.slice(0, 10) + "…"
        : column.dataType;
    return (_jsxs("div", { className: "flex items-center gap-1 py-0.5 pr-2 text-xs text-gray-500", style: { paddingLeft: depth * INDENT_PX + 4 }, children: [_jsx("span", { className: "w-4 shrink-0" }), _jsx("span", { className: "truncate", children: column.name }), _jsxs("span", { className: "ml-auto shrink-0 text-gray-400", children: ["(", typeLabel, ")"] })] }));
}
export function SchemaTreeSidebar({ schema, tables, selectedTable, onSelectTable, onRefresh, loading, }) {
    const [expandedNodes, setExpandedNodes] = useState({
        [schema]: true,
    });
    const toggleNode = (nodeId) => {
        setExpandedNodes((prev) => ({
            ...prev,
            [nodeId]: !prev[nodeId],
        }));
    };
    const handleTableClick = (tableName) => {
        onSelectTable(tableName);
        setExpandedNodes((prev) => ({
            ...prev,
            [tableName]: !prev[tableName],
        }));
    };
    const isSchemaExpanded = expandedNodes[schema] ?? false;
    const handleRefreshClick = (e) => {
        e.stopPropagation();
        void onRefresh?.();
    };
    return (_jsx("div", { className: "flex flex-col overflow-auto pt-4 text-sm", children: _jsx(TreeItem, { depth: 0, expanded: isSchemaExpanded, hasChildren: tables.length > 0, icon: _jsx(Icon, { name: isSchemaExpanded ? "FolderOpen" : "FolderClose", size: 16 }), label: _jsxs("div", { className: "flex flex-1 items-center", children: [_jsx("span", { className: "truncate", children: schema }), onRefresh && (_jsx("button", { className: "ml-auto p-0.5 text-gray-400 hover:text-gray-600", onClick: handleRefreshClick, type: "button", disabled: loading, children: _jsx(Icon, { name: "Reload", size: 14, className: loading ? "animate-spin" : undefined }) }))] }), onClick: () => toggleNode(schema), onToggle: () => toggleNode(schema), children: tables.map((table) => {
                const isTableExpanded = expandedNodes[table.name] ?? false;
                const isSelected = selectedTable === table.name;
                return (_jsx(TreeItem, { depth: 1, expanded: isTableExpanded, hasChildren: table.columns.length > 0, icon: _jsx(Icon, { name: "TreeViewSlash", size: 16 }), label: table.name, selected: isSelected, onClick: () => handleTableClick(table.name), onToggle: () => toggleNode(table.name), children: table.columns.map((col) => (_jsx(ColumnItem, { column: col, depth: 2 }, col.name))) }, table.name));
            }) }) }));
}
//# sourceMappingURL=schema-tree-sidebar.js.map