import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo, useState } from 'react';
import { FormProvider } from 'react-hook-form';
import { MemoryRouter } from 'react-router-dom';
import useHuPagination from '../../../hooks/useHuPagination';
import Stack from '@mui/material/Stack';
import { SidebarWrapper } from './components/SidebarWrapper';
import { articleModelMock, defaultCapabilitiesMock, rootModelMock, } from './mock';
import LibrariesSidebar from '.';
const meta = {
    component: LibrariesSidebar,
    parameters: { layout: 'fullscreen' },
    title: 'Composed Components/LibrariesSidebar',
    tags: ['autodocs'],
    args: {
        model: rootModelMock,
        capabilities: defaultCapabilitiesMock,
        onBack: () => console.log('onBack'),
        onSort: payload => console.log('onSort', payload),
        onAdd: () => console.log('onAdd'),
    },
    decorators: [
        Story => (_jsx(MemoryRouter, { children: _jsx(Stack, { sx: {
                    width: '100%',
                    minHeight: '100vh',
                    maxWidth: 'min-content',
                    mx: 'auto',
                }, children: _jsx(Story, {}) }) })),
    ],
};
export default meta;
const Template = (args) => {
    const { Search, form } = useHuPagination();
    const search = form.watch('params.search') ?? '';
    const [selected, setSelected] = useState({ parentId: undefined, model: args.model });
    const baseModel = selected.parentId ? articleModelMock : args.model;
    const filteredModel = useMemo(() => {
        if (!search.trim())
            return baseModel;
        const query = search.toLowerCase();
        return {
            ...baseModel,
            nodes: baseModel.nodes.filter(node => node.title.toLowerCase().includes(query)),
        };
    }, [search, baseModel]);
    const handleItemClick = (item) => {
        const isRoot = !item.parentId;
        if (isRoot) {
            setSelected({
                parentId: item.id,
                model: { ...articleModelMock, headerTitle: item.title },
            });
        }
        else {
            console.log('onChildItemClick', item);
        }
    };
    const handleBack = () => setSelected({ parentId: undefined, model: args.model });
    const handleSort = (sortedItems) => {
        console.log('handleOnSort', sortedItems);
    };
    return (_jsx(FormProvider, { ...form, children: _jsxs(SidebarWrapper, { children: [_jsx(Stack, { sx: { px: 1, py: 1, backgroundColor: 'white' }, children: _jsx(Search, { inputProps: { variant: 'custom' } }) }), _jsx(LibrariesSidebar, { ...args, model: filteredModel, parentId: selected.parentId, onBack: handleBack, onSort: handleSort, onItemClick: handleItemClick })] }) }));
};
export const Default = {
    render: args => _jsx(Template, { ...args }),
};
export const Empty = {
    args: { model: { headerTitle: '', nodes: [] } },
    render: args => _jsx(Template, { ...args }),
};
export const Loading = {
    args: { loading: true },
    render: args => _jsx(Template, { ...args }),
};
