import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from 'react';
import { BaseDrawer } from './base-drawer.js';
import { DrawerTitle, DrawerDescription } from '../../ui/drawer.js';
import { Button } from '../../ui/button.js';
const meta = {
    title: 'Drawers/Base/BaseDrawer',
    component: BaseDrawer,
    tags: ['autodocs'],
    parameters: {
        layout: 'fullscreen',
    },
};
export default meta;
/* ---------------------------------------------------------------------------
 * Trigger wrapper — starts closed, click to open
 * ------------------------------------------------------------------------- */
function DrawerTrigger(props) {
    const [open, setOpen] = useState(false);
    return (_jsxs("div", { className: "flex h-screen items-start p-4", children: [_jsx(Button, { variant: "outline", onClick: () => setOpen(true), children: "Open Drawer" }), _jsx(BaseDrawer, { ...props, open: open, onClose: () => setOpen(false) })] }));
}
/* ---------------------------------------------------------------------------
 * Stories
 * ------------------------------------------------------------------------- */
/** Default drawer with sm size, non-modal, children only. */
export const Default = {
    render: () => (_jsx(DrawerTrigger, { children: _jsx("div", { className: "p-4", children: _jsx("p", { className: "text-muted-foreground text-sm", children: "Default drawer content" }) }) })),
};
/** Explicit sm size with inspector-style content. */
export const SmallSize = {
    render: () => (_jsx(DrawerTrigger, { size: "sm", children: _jsxs("div", { className: "flex flex-col gap-3 p-4", children: [_jsx("h3", { className: "text-sm font-semibold", children: "Feature Inspector" }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-muted-foreground text-xs", children: "Status" }), _jsx("span", { className: "text-sm", children: "Running" })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-muted-foreground text-xs", children: "Progress" }), _jsx("div", { className: "bg-muted h-2 w-full overflow-hidden rounded-full", children: _jsx("div", { className: "bg-primary h-full w-[45%] rounded-full" }) })] })] }) })),
};
/** Medium size with content-rich review-style content. */
export const MediumSize = {
    render: () => (_jsx(DrawerTrigger, { size: "md", children: _jsxs("div", { className: "flex flex-col gap-4 p-4", children: [_jsx("h3", { className: "text-sm font-semibold", children: "Review Content" }), _jsx("p", { className: "text-muted-foreground text-sm", children: "This drawer uses size=\"md\" (w-2xl / 672px) for content-rich review panels that need more horizontal space for diff summaries, tables, and code blocks." }), _jsx("div", { className: "bg-muted rounded-md p-3", children: _jsx("pre", { className: "text-xs", children: `+ Added authentication middleware\n- Removed legacy session handler\n  Updated user model schema` }) })] }) })),
};
/** Modal drawer with overlay. */
export const Modal = {
    render: () => (_jsx(DrawerTrigger, { modal: true, children: _jsx("div", { className: "p-4", children: _jsx("p", { className: "text-muted-foreground text-sm", children: "This drawer is modal \u2014 an overlay blocks background interaction and focus is trapped." }) }) })),
};
/** Drawer with header slot containing DrawerTitle and DrawerDescription. */
export const WithHeader = {
    render: () => (_jsx(DrawerTrigger, { header: _jsxs(_Fragment, { children: [_jsx(DrawerTitle, { children: "Feature Details" }), _jsx(DrawerDescription, { children: "FEAT-042 \u2014 Authentication Flow" })] }), children: _jsx("div", { className: "p-4", children: _jsx("p", { className: "text-muted-foreground text-sm", children: "Content below the header." }) }) })),
};
/** Drawer with footer slot containing action buttons. */
export const WithFooter = {
    render: () => (_jsx(DrawerTrigger, { footer: _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "outline", className: "flex-1", children: "Cancel" }), _jsx(Button, { className: "flex-1", children: "Save" })] }), children: _jsx("div", { className: "p-4", children: _jsx("p", { className: "text-muted-foreground text-sm", children: "Content above the footer." }) }) })),
};
/** Drawer with both header and footer slots populated. */
export const WithHeaderAndFooter = {
    render: () => (_jsx(DrawerTrigger, { header: _jsxs(_Fragment, { children: [_jsx(DrawerTitle, { children: "Create Feature" }), _jsx(DrawerDescription, { children: "Fill in the details below" })] }), footer: _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "outline", className: "flex-1", children: "Cancel" }), _jsx(Button, { className: "flex-1", children: "Create" })] }), children: _jsxs("div", { className: "flex flex-col gap-4 p-4", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("label", { className: "text-sm font-medium", children: "Name" }), _jsx("input", { type: "text", className: "border-input bg-background rounded-md border px-3 py-2 text-sm", placeholder: "Feature name" })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("label", { className: "text-sm font-medium", children: "Description" }), _jsx("textarea", { className: "border-input bg-background rounded-md border px-3 py-2 text-sm", rows: 3, placeholder: "Optional description" })] })] }) })),
};
/** Drawer with deployTarget prop showing the dev server bar below the header. */
export const WithDevServerBar = {
    render: () => (_jsx(DrawerTrigger, { header: _jsxs(_Fragment, { children: [_jsx(DrawerTitle, { children: "Auth Module" }), _jsx(DrawerDescription, { children: "#f-001" })] }), deployTarget: {
            targetId: '#f-001',
            targetType: 'feature',
            repositoryPath: '/Users/dev/my-project',
            branch: 'feat/auth-module',
        }, children: _jsx("div", { className: "p-4", children: _jsx("p", { className: "text-muted-foreground text-sm", children: "The deploy bar appears between the header and this content." }) }) })),
};
/**
 * Drawer with content that exceeds viewport to demonstrate scroll behavior.
 *
 * **Fixed Header/Footer Layout:**
 * - The header (DrawerTitle + DrawerDescription) remains fixed at the top while scrolling
 * - A Separator is automatically rendered below the header — no need to add one manually
 * - The footer (if present, e.g., DrawerActionBar) remains fixed at the bottom while scrolling
 * - Only the content area (children) scrolls when drawer content exceeds available height
 *
 * **Spacing Conventions:**
 * - Content consumers should add `p-4` padding for consistent spacing (as shown in this example)
 * - Footer components like DrawerActionBar should use `border-t` for visual separation
 *
 * Try scrolling the content below to see the fixed header behavior.
 */
export const ScrollableContent = {
    render: () => (_jsx(DrawerTrigger, { header: _jsxs(_Fragment, { children: [_jsx(DrawerTitle, { children: "Scrollable Content" }), _jsx(DrawerDescription, { children: "Content below overflows and scrolls" })] }), children: _jsx("div", { className: "flex flex-col gap-4 overflow-y-auto p-4", children: Array.from({ length: 30 }, (_, i) => (_jsxs("div", { className: "border-border rounded-md border p-3", children: [_jsxs("h4", { className: "text-sm font-medium", children: ["Item ", i + 1] }), _jsx("p", { className: "text-muted-foreground text-xs", children: "This is a scrollable content item to demonstrate overflow handling." })] }, i))) }) })),
};
