import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Icon } from '../../components/icon/index.js';
import { useCallback, useState } from 'react';
// @ts-expect-error JSON file
import mockedTree from './mocked_tree.json';
import { Sidebar } from './sidebar.js';
import { SidebarProvider } from './subcomponents/sidebar-provider/index.js';
import { cn } from '@powerhousedao/document-engineering/scalars/lib/utils.js';
/**
 * The `Sidebar` component can be used within a page layout to provide a sidebar navigation.
 * It provided a tree structure of nodes that can be used to navigate the application offering customization, search and more.
 *
 * The `Sidebar` component requires a `SidebarProvider` ancestor component to function correctly. The `SidebarProvider` accepts an optional `nodes` prop
 * which defines the navigation tree structure. If `nodes` is not provided to the provider, the `Sidebar` component can accept its own `nodes` prop.
 * If neither source provides nodes, the sidebar will render empty.
 *
 * Usage:
 *
 * ```tsx
 * <SidebarProvider nodes={nodes}>
 *   <Sidebar {...sidebarProps} />
 * </SidebarProvider>
 * ```
 *
 * The sidebar nodes are defined as follows:
 *
 * ```tsx
 * type SidebarNode = {
 *   id: string;
 *   title: string;
 *   children: SidebarNode[];
 *   icon?: IconName | ReactElement;
 *   expandedIcon?: IconName | ReactElement;
 *   status?: NodeStatus;
 * };
 * enum NodeStatus {
 *   CREATED = "CREATED",
 *   MODIFIED = "MODIFIED",
 *   REMOVED = "REMOVED",
 *   MOVED = "MOVED",
 *   DUPLICATED = "DUPLICATED",
 *   UNCHANGED = "UNCHANGED", // default status, no need to set it
 * }
 * ```
 *
 * The `icon` and `expandedIcon` properties are optional and can be used to display an icon in the sidebar item.
 * This icons must be one of the [available icons](?path=/docs/powerhouse-iconography--readme)
 *
 *
 * ## Sidebar Events
 *
 * The `Sidebar` component emits the following custom events:
 *
 * - `sidebar:change`: it is triggered when the sidebar item is clicked.
 *  - Data: `{ node: SidebarNode }`
 * - `sidebar:resize:start`: it is triggered when the sidebar resize starts at the moment the user clicks down in the resizing handle.
 *  - Data: `{ isSidebarOpen: boolean }`
 * - `sidebar:resize:active`: it is triggered when the sidebar is being resized while the user is dragging the resizing handle.
 * It could be triggered multiple times while the user is dragging the resizing handle.
 *  - Data: `{ isSidebarOpen: boolean, sidebarWidth: number }`
 * - `sidebar:resize`: it is triggered when the sidebar resize stops at the moment the user releases the resizing handle.
 *  - Data: `{ isSidebarOpen: boolean, sidebarWidth: number }`
 * - `sidebar:resize:toggle`: it is triggered when the sidebar is toggled (collapsed or expanded).
 *  - Data: `{ isSidebarOpen: boolean }`
 *
 * ### Example of listening to the events
 *
 * ```tsx
 * useEffect(() => {
 *   const onResize = (event: Event) => {
 *     console.log("sidebar:resize", event);
 *   };
 *
 *   // you can add the listener directly to the document or add a
 *   // `className`, get the sidebar element and add the listener to it.
 *   document.addEventListener("sidebar:resize", onResize);
 *
 *   return () => {
 *     document.removeEventListener("sidebar:resize", onResize);
 *   };
 * }, []);
 * ```
 *  ## Customization
 * The sidebar can be customized using the `className` prop which accepts a string of Tailwind classes.
 * Each class should follow the format `[&_.sidebar\\_\\_{element}]:{tailwind-classes}`.
 *
 * Base classes available for customization:
 * - .sidebar__container: Main sidebar container
 * - .sidebar__item: Individual sidebar item
 * - .sidebar__item--active: Active sidebar item
 * - .sidebar__item-title: Item title text
 * - .sidebar__item-caret: Expand/collapse caret button
 * - .sidebar__item-caret--no-children: Caret for items without children
 * - .sidebar__item-pin: Pin button for items
 * - .sidebar__item-pin--active: Active pin button
 * - .sidebar__header: Sidebar header container
 * - .sidebar__header-title: Header title text
 * - .sidebar__header-macro-item: Macro item in header
 * - .sidebar__pinning-area: Pinned items area
 *
 * ## Example Usage
 *
 *
 * ```tsx
 * import { Sidebar } from './sidebar'
 *
 * function MyCustomSidebar() {
 *   return (
 *     <Sidebar
 *       className={String.raw`
 *         [&_.sidebar\\_\\_item]:bg-blue-500
 *         [&_.sidebar\\_\\_item]:text-white
 *         [&_.sidebar\\_\\_item--active]:bg-green-500
 *         [&_.sidebar\\_\\_item--active]:text-black
 *         [&_.sidebar\\_\\_item-caret]:bg-yellow-500
 *         [&_.sidebar\\_\\_item-pin]:fill-red-500
 *         [&_.sidebar\\_\\_header]:bg-red-500
 *         [&_.sidebar\\_\\_header-title]:text-white
 *       `}
 *     />
 *   )
 * }
 * ```
 */
const meta = {
    title: 'Navigation/Sidebar',
    component: Sidebar,
    tags: ['autodocs'],
    decorators: [
        (Story) => (_jsx(SidebarProvider, { nodes: mockedTree, children: _jsx(Story, {}) })),
    ],
    parameters: {
        layout: 'fullscreen',
    },
    argTypes: {
        activeNodeId: {
            control: 'text',
            description: 'The id of the node that is currently active.',
        },
        nodes: {
            control: 'object',
            table: {
                readonly: true,
            },
            description: 'The nodes to be displayed in the sidebar. It can be provided through the SidebarProvider to prevent flickering.',
        },
        sidebarTitle: {
            control: 'text',
            description: 'The title of the sidebar.',
        },
        sidebarIcon: {
            control: 'object',
            table: {
                readonly: true,
            },
            description: 'The icon of the sidebar.',
        },
        defaultLevel: {
            control: 'number',
            description: 'The level to be opened by default.',
            table: {
                defaultValue: { summary: '1' },
            },
        },
        enableMacros: {
            control: 'number',
            description: 'The number of macros to be displayed in the sidebar. Recommended up to 4.',
            table: {
                defaultValue: { summary: '0' },
            },
        },
        allowPinning: {
            control: 'boolean',
            description: 'Whether the sidebar items can be pinned.',
            table: {
                defaultValue: { summary: 'true' },
            },
        },
        resizable: {
            control: 'boolean',
            description: 'Whether the sidebar is resizable.',
            table: {
                defaultValue: { summary: 'true' },
            },
        },
        showSearchBar: {
            control: 'boolean',
            description: 'Whether the sidebar allows searching.',
            table: {
                defaultValue: { summary: 'true' },
            },
        },
        showStatusFilter: {
            control: 'boolean',
            description: 'Whether the sidebar allows filtering by status.',
            table: {
                defaultValue: { summary: 'false' },
            },
        },
        extraFooterContent: {
            control: 'object',
            description: 'Additional content to be displayed in the sidebar footer.',
            table: {
                readonly: true,
            },
        },
        initialWidth: {
            control: 'number',
            description: 'The initial width of the sidebar.',
            table: {
                defaultValue: { summary: '300' },
            },
        },
        maxWidth: {
            control: 'number',
            description: 'The maximum width of the sidebar.',
        },
        allowCollapsingInactiveNodes: {
            control: 'boolean',
            description: 'Whether to allow collapsing inactive nodes on click.',
            table: {
                defaultValue: { summary: 'false' },
            },
        },
        handleOnTitleClick: {
            control: false,
            description: 'Callback function triggered when the sidebar title is clicked. Use this to implement custom navigation logic.',
            table: {
                readonly: true,
            },
        },
        isLoading: {
            control: 'boolean',
            description: 'Whether the sidebar is in a loading state, displaying skeleton items instead of actual content.',
            table: {
                defaultValue: { summary: 'false' },
            },
        },
        nodeSortType: {
            control: 'select',
            options: ['alphabetical', 'natural'],
            description: 'The type of sorting to apply to all nodes recursively. Can be "alphabetical", "natural" or a custom comparison function. Affects all levels of the tree hierarchy.',
            table: {
                type: { summary: '"alphabetical" | "natural" | ((valueA: string, valueB: string) => -1 | 0 | 1)' },
            },
        },
        nodeSortOrder: {
            control: 'select',
            options: ['asc', 'desc'],
            description: 'Sort order of nodes (ascending or descending). Only applicable when nodeSortType is defined.',
            table: {
                defaultValue: { summary: '"asc"' },
                type: { summary: '"asc" | "desc"' },
            },
            if: { arg: 'nodeSortType', exists: true },
        },
    },
    args: {
        sidebarTitle: 'Title Sidebar',
        sidebarIcon: (_jsx("div", { className: "flex items-center justify-center rounded-md bg-gray-900 p-2", children: _jsx(Icon, { name: "M", className: "text-gray-50", size: 16 }) })),
        enableMacros: 4,
        onActiveNodeChange: (node) => {
            console.log('onActiveNodeChange', node);
        },
    },
};
export default meta;
export const Default = {};
/**
 * The `Sidebar` component can be used within a page layout to provide a sidebar navigation.
 * It can also be used to display additional content within the sidebar, such as authentication buttons.
 * or any other react component.
 */
export const WithinLayoutAndContent = {
    args: {
        showStatusFilter: true,
    },
    render: function WithinLayoutAndContentRender(args) {
        const [activeNode, setActiveNode] = useState('4281ab93-ef4f-4974-988d-7dad149a693d');
        const onActiveNodeChange = useCallback((node) => {
            setActiveNode(node.id);
        }, []);
        return (_jsxs("main", { className: "flex h-svh w-full", children: [_jsx(Sidebar, { className: "sidebar", ...args, onActiveNodeChange: onActiveNodeChange, activeNodeId: activeNode, extraFooterContent: _jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-baseline gap-2 text-gray-900 dark:text-gray-200", children: [_jsx("div", { children: "Login with" }), _jsx(Icon, { name: "Renown", size: "auto", height: 18, className: "cursor-pointer" })] }), _jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Auth integration example within sidebar content" })] }) }), _jsxs("div", { style: { width: 'calc(100% - var(--sidebar-width))' }, className: "flex-1 bg-gray-50 p-4 dark:bg-slate-800", children: [_jsx("h1", { className: "text-2xl font-bold text-gray-900 dark:text-gray-50", children: "Content Area" }), _jsxs("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: ["Active Node: ", activeNode] })] })] }));
    },
};
/**
 * Example showing how to use the `handleOnTitleClick` callback to implement custom navigation.
 * This allows developers to make the sidebar title clickable for custom navigation logic.
 */
export const WithCustomTitleNavigation = {
    args: {
        showStatusFilter: true,
    },
    render: function WithCustomTitleNavigationRender(args) {
        const [activeNode, setActiveNode] = useState('4281ab93-ef4f-4974-988d-7dad149a693d');
        const [navigationLog, setNavigationLog] = useState([]);
        const onActiveNodeChange = useCallback((node) => {
            setActiveNode(node.id);
        }, []);
        const handleTitleClick = useCallback(() => {
            const timestamp = new Date().toLocaleTimeString();
            setNavigationLog((prev) => [...prev, `Title clicked at ${timestamp} - Navigate to root/home`]);
        }, []);
        return (_jsxs("main", { className: "flex h-svh w-full", children: [_jsx(Sidebar, { className: "sidebar", ...args, onActiveNodeChange: onActiveNodeChange, activeNodeId: activeNode, handleOnTitleClick: handleTitleClick, sidebarTitle: "Click me to go home!" }), _jsxs("div", { style: { width: 'calc(100% - var(--sidebar-width))' }, className: "flex-1 bg-gray-50 p-4 dark:bg-slate-800", children: [_jsx("h1", { className: "text-2xl font-bold text-gray-900 dark:text-gray-50", children: "Content Area" }), _jsxs("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: ["Active Node: ", activeNode] }), _jsxs("div", { className: "mt-4", children: [_jsx("h2", { className: "text-lg font-semibold text-gray-900 dark:text-gray-50", children: "Navigation Log:" }), _jsx("div", { className: "mt-2 overflow-y-auto rounded border p-2 bg-white dark:bg-slate-700", children: navigationLog.length === 0 ? (_jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: "Click the sidebar title to see navigation events" })) : (_jsx("ul", { className: "text-sm text-gray-700 dark:text-gray-300", children: navigationLog.map((log, index) => (_jsx("li", { className: "py-1", children: log }, index))) })) })] })] })] }));
    },
};
export const WithCustomStyles = {
    args: {
        showStatusFilter: true,
    },
    render: function WithCustomTitleNavigationRender(args) {
        const [activeNode, setActiveNode] = useState('4281ab93-ef4f-4974-988d-7dad149a693d');
        const [navigationLog, setNavigationLog] = useState([]);
        const onActiveNodeChange = useCallback((node) => {
            setActiveNode(node.id);
        }, []);
        const handleTitleClick = useCallback(() => {
            const timestamp = new Date().toLocaleTimeString();
            setNavigationLog((prev) => [...prev, `Title clicked at ${timestamp} - Navigate to root/home`]);
        }, []);
        return (_jsxs("main", { className: "flex h-svh w-full", children: [_jsx(Sidebar, { className: cn('sidebar', String.raw `
            [&_.sidebar\\_\\_item]:bg-blue-50
            [&_.sidebar\\_\\_item]:border-blue-200
            [&_.sidebar\\_\\_item]:text-blue-800
            [&_.sidebar\\_\\_item--active]:bg-emerald-50
            [&_.sidebar\\_\\_item--active]:border-emerald-300
            [&_.sidebar\\_\\_item--active]:text-emerald-800
            [&_.sidebar\\_\\_item-caret]:bg-amber-50
            [&_.sidebar\\_\\_item-caret]:border-amber-200
            [&_.sidebar\\_\\_item-caret]:text-amber-700
            [&_.sidebar\\_\\_item-title]:text-slate-900

            [&_.sidebar\\_\\_item-pin]:fill-rose-500
            [&_.sidebar\\_\\_item-pin]:text-rose-600
            [&_.sidebar\\_\\_item-pin--active]:fill-emerald-500
            [&_.sidebar\\_\\_item-pin--active]:text-emerald-600
            [&_.sidebar\\_\\_item-caret--no-children]:text-slate-400 dark:text-slate-500
            [&_.sidebar\\_\\_header]:bg-slate-100
            [&_.sidebar\\_\\_header]:text-slate-800
            [&_.sidebar\\_\\_header-title]:text-slate-900
            [&_.sidebar\\_\\_header-macro-item]:bg-indigo-50
            [&_.sidebar\\_\\_header-macro-item]:text-indigo-800
            [&_.sidebar\\_\\_pinning-area]:bg-amber-50
            [&_.sidebar\\_\\_pinning-area]:text-amber-800
             `), ...args, onActiveNodeChange: onActiveNodeChange, activeNodeId: activeNode, handleOnTitleClick: handleTitleClick, sidebarTitle: "Click me to go home!" }), _jsxs("div", { style: { width: 'calc(100% - var(--sidebar-width))' }, className: "flex-1 bg-gray-50 p-4 dark:bg-slate-800", children: [_jsx("h1", { className: "text-2xl font-bold text-gray-900 dark:text-gray-50", children: "Content Area" }), _jsxs("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: ["Active Node: ", activeNode] }), _jsxs("div", { className: "mt-4", children: [_jsx("h2", { className: "text-lg font-semibold text-gray-900 dark:text-gray-50", children: "Navigation Log:" }), _jsx("div", { className: "mt-2 overflow-y-auto rounded border p-2 bg-white dark:bg-slate-700", children: navigationLog.length === 0 ? (_jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: "Click the sidebar title to see navigation events" })) : (_jsx("ul", { className: "text-sm text-gray-700 dark:text-gray-300", children: navigationLog.map((log, index) => (_jsx("li", { className: "py-1", children: log }, index))) })) })] })] })] }));
    },
};
export const WithCustomTargetElement = {
    args: {
        showStatusFilter: true,
    },
    render: function WithCustomTitleNavigationRender(args) {
        const [activeNode, setActiveNode] = useState('4281ab93-ef4f-4974-988d-7dad149a693d');
        const [navigationLog, setNavigationLog] = useState([]);
        const onActiveNodeChange = useCallback((node) => {
            setActiveNode(node.id);
        }, []);
        const handleTitleClick = useCallback(() => {
            const timestamp = new Date().toLocaleTimeString();
            setNavigationLog((prev) => [...prev, `Title clicked at ${timestamp} - Navigate to root/home`]);
        }, []);
        const stylesToApply = {
            '4281ab93-ef4f-4974-988d-7dad149a693d': 'bg-red-900 text-white hover:!bg-red-800',
            'f85e197f-9fd7-48ed-abe9-5d2c1b22475a': 'bg-blue-900 text-white hover:!bg-blue-800',
            'c4be9c5e-520d-4e9c-b29e-3adcc8071452': 'bg-purple-900 text-white hover:!bg-purple-800',
            'eca5e587-79e3-480b-b70d-dd25697c9e1f': 'bg-green-900 text-white hover:!bg-green-800',
        };
        const applyStylesRecursively = (node) => {
            return {
                ...node,
                className: stylesToApply[node.id] || node.className,
                children: node.children?.map(applyStylesRecursively),
            };
        };
        const nodes = mockedTree.map(applyStylesRecursively);
        return (_jsxs("main", { className: "flex h-svh w-full", children: [_jsx(Sidebar, { nodes: nodes, className: "sidebar", ...args, onActiveNodeChange: onActiveNodeChange, activeNodeId: activeNode, handleOnTitleClick: handleTitleClick, sidebarTitle: "Click me to go home!" }), _jsxs("div", { style: { width: 'calc(100% - var(--sidebar-width))' }, className: "flex-1 bg-gray-50 p-4 dark:bg-slate-800", children: [_jsx("h1", { className: "text-2xl font-bold text-gray-900 dark:text-gray-50", children: "Content Area" }), _jsxs("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: ["Active Node: ", activeNode] }), _jsxs("div", { className: "mt-4", children: [_jsx("h2", { className: "text-lg font-semibold text-gray-900 dark:text-gray-50", children: "Navigation Log:" }), _jsx("div", { className: "mt-2 overflow-y-auto rounded border p-2 bg-white dark:bg-slate-700", children: navigationLog.length === 0 ? (_jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: "Click the sidebar title to see navigation events" })) : (_jsx("ul", { className: "text-sm text-gray-700 dark:text-gray-300", children: navigationLog.map((log, index) => (_jsx("li", { className: "py-1", children: log }, index))) })) })] })] })] }));
    },
};
/**
 * Demonstrates the loading state of the sidebar when data is being fetched.
 * The sidebar displays skeleton items with animated placeholders while preserving
 * all other functionality like header, search bar, and footer content.
 */
export const Loading = {
    args: {
        isLoading: true,
        showStatusFilter: true,
    },
    render: function LoadingRender(args) {
        const [isLoading, setIsLoading] = useState(true);
        return (_jsxs("main", { className: "flex h-svh w-full", children: [_jsx(Sidebar, { className: "sidebar", ...args, isLoading: isLoading }), _jsxs("div", { style: { width: 'calc(100% - var(--sidebar-width))' }, className: "flex-1 bg-gray-50 p-4 dark:bg-slate-800", children: [_jsx("h1", { className: "text-2xl font-bold text-gray-900 dark:text-gray-50", children: "Content Area" }), _jsxs("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: ["Sidebar Status: ", isLoading ? 'Loading...' : 'Ready'] }), _jsx("div", { className: "mt-4", children: _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("button", { type: "button", onClick: () => {
                                            setIsLoading(!isLoading);
                                        }, className: "rounded bg-blue-500 px-3 py-1 text-sm text-white hover:bg-blue-600", children: isLoading ? 'Stop Loading' : 'Start Loading' }), _jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Toggle loading state to see the skeleton animation" })] }) })] })] }));
    },
};
/**
 * Demonstrates how to use a custom sorting function for nodes.
 * This example shows sorting by string length (shorter titles first) then alphabetically if lengths are equal.
 */
export const WithCustomSorting = {
    args: {
        defaultLevel: 2,
    },
    render: function WithCustomSortingRender(args) {
        // Custom sorting function that sorts by title length first, then alphabetically
        const customSortFunction = useCallback((valueA, valueB) => {
            const lengthComparison = valueA.length - valueB.length;
            if (lengthComparison !== 0) {
                return lengthComparison < 0 ? -1 : 1;
            }
            // If lengths are equal, sort alphabetically
            const alphabetical = valueA.toLowerCase().localeCompare(valueB.toLowerCase());
            return alphabetical < 0 ? -1 : alphabetical > 0 ? 1 : 0;
        }, []);
        return (_jsxs("main", { className: "flex h-svh w-full", children: [_jsx(Sidebar, { className: "sidebar", ...args, nodeSortType: args.nodeSortType ?? customSortFunction }), _jsxs("div", { style: { width: 'calc(100% - var(--sidebar-width))' }, className: "flex-1 bg-gray-50 p-4 dark:bg-slate-800", children: [_jsx("h1", { className: "text-2xl font-bold text-gray-900 dark:text-gray-50", children: "Custom Sorting" }), _jsxs("div", { className: "mt-4 space-y-2 text-sm text-gray-600 dark:text-gray-400", children: [_jsxs("p", { children: [_jsx("strong", { children: "nodeSortType:" }), ' ', args.nodeSortType === undefined
                                            ? 'Custom Function (sorts in ascending order by string length, then alphabetically if lengths are equal)'
                                            : args.nodeSortType.toString()] }), _jsxs("p", { children: [_jsx("strong", { children: "nodeSortOrder:" }), " ", args.nodeSortOrder ?? 'asc'] })] })] })] }));
    },
};
//# sourceMappingURL=sidebar.stories.js.map