import { jsx as _jsx } from "react/jsx-runtime";
import { fn } from "@storybook/test";
import { useState } from "react";
import { SchemaTreeSidebar, } from "./schema-tree-sidebar.js";
const meta = {
    title: "Connect/Components/DBExplorer/SchemaTreeSidebar",
    component: SchemaTreeSidebar,
    parameters: {
        layout: "padded",
    },
    decorators: [
        (Story) => (_jsx("div", { className: "w-64 border border-gray-200 bg-white", children: _jsx(Story, {}) })),
    ],
};
export default meta;
const mockTables = [
    {
        name: "users",
        columns: [
            { name: "id", dataType: "int4", isNullable: false },
            { name: "name", dataType: "varchar", isNullable: false },
            { name: "email", dataType: "varchar", isNullable: false },
            { name: "created_at", dataType: "timestamp", isNullable: true },
        ],
    },
    {
        name: "posts",
        columns: [
            { name: "id", dataType: "int4", isNullable: false },
            { name: "title", dataType: "varchar", isNullable: false },
            { name: "content", dataType: "text", isNullable: true },
            { name: "author_id", dataType: "int4", isNullable: false },
            { name: "published_at", dataType: "timestamp", isNullable: true },
        ],
    },
    {
        name: "comments",
        columns: [
            { name: "id", dataType: "int4", isNullable: false },
            { name: "post_id", dataType: "int4", isNullable: false },
            { name: "user_id", dataType: "int4", isNullable: false },
            { name: "body", dataType: "text", isNullable: false },
        ],
    },
    {
        name: "tags",
        columns: [
            { name: "id", dataType: "int4", isNullable: false },
            { name: "name", dataType: "varchar", isNullable: false },
        ],
    },
];
export const Default = {
    args: {
        schema: "public",
        tables: mockTables,
        onSelectTable: fn(),
        onRefresh: fn(),
    },
};
export const WithSelectedTable = {
    args: {
        schema: "public",
        tables: mockTables,
        selectedTable: "users",
        onSelectTable: fn(),
    },
};
export const EmptySchema = {
    args: {
        schema: "public",
        tables: [],
        onSelectTable: fn(),
    },
};
const manyTables = mockTables.concat([
    { name: "categories", columns: [] },
    { name: "products", columns: [] },
    { name: "orders", columns: [] },
    { name: "order_items", columns: [] },
    { name: "payments", columns: [] },
    { name: "reviews", columns: [] },
    { name: "sessions", columns: [] },
    { name: "logs", columns: [] },
]);
export const ManyTables = {
    args: {
        schema: "public",
        tables: manyTables,
        onSelectTable: fn(),
    },
};
function InteractiveWrapper(args) {
    const [selectedTable, setSelectedTable] = useState();
    const handleSelectTable = (table) => {
        setSelectedTable(table);
        args.onSelectTable(table);
    };
    return (_jsx(SchemaTreeSidebar, { ...args, selectedTable: selectedTable, onSelectTable: handleSelectTable }));
}
export const Interactive = {
    render: InteractiveWrapper,
    args: {
        schema: "public",
        tables: mockTables,
        onSelectTable: fn(),
        onRefresh: fn(),
    },
};
export const Loading = {
    args: {
        schema: "public",
        tables: mockTables,
        onSelectTable: fn(),
        onRefresh: fn(),
        loading: true,
    },
};
//# sourceMappingURL=schema-tree-sidebar.stories.js.map