import { useMemo, useState } from 'react';
import { icons, Modal, SummaryList, ViewAll, createStringMatcher, useModalManager } from '@pega/cosmos-react-core';
import { useMockListData } from './SummaryList.mocks';
export default {
    title: 'Core/SummaryList',
    component: SummaryList,
    parameters: {
        layout: 'centered'
    },
    args: {
        name: 'People',
        icon: 'users-solid',
        count: 5,
        loading: false,
        showSecondary: true,
        showVisual: true,
        showActions: true,
        noItems: false,
        noItemsText: 'No items'
    },
    argTypes: {
        name: { control: { type: 'text' } },
        icon: { options: [...icons], control: { type: 'select', icons: true } },
        count: { control: { type: 'number' } },
        loading: { control: { type: 'boolean' } },
        showSecondary: { control: { type: 'boolean' } },
        showVisual: { control: { type: 'boolean' } },
        showActions: { control: { type: 'boolean' } },
        noItems: { control: { type: 'boolean' } },
        noItemsText: { control: { type: 'text' } }
    }
};
export const SummaryListDemo = (args) => {
    const { create: createModal } = useModalManager();
    const [loading, setLoading] = useState(true);
    const [items] = useMockListData(() => {
        setLoading(false);
    }, { count: args.count });
    const itemsToRender = items.map(item => {
        return {
            ...item,
            secondary: args.showSecondary ? item.secondary : undefined,
            visual: args.showVisual ? item.visual : undefined,
            actions: args.showActions
                ? ['Action 1', 'Action 2', 'Action 3'].map(text => ({
                    text,
                    id: text
                }))
                : undefined
        };
    });
    return (<SummaryList name={args.name} icon={args.icon} count={args.loading || loading ? undefined : args.count} items={args.noItems ? [] : itemsToRender} loading={args.loading || loading} noItemsText={args.noItemsText} actions={[
            {
                text: 'Add',
                id: `${args.name}:addNew`,
                icon: 'plus',
                onClick() {
                    createModal(() => {
                        return (<Modal heading={`Add new ${args.name}`}>
                  {`Content for adding new ${args.name} goes here…`}
                </Modal>);
                    });
                }
            }
        ]}/>);
};
export const SummaryListViewAll = (args) => {
    const SummaryListViewAllModal = ({ name, count, loading }) => {
        const [search, setSearch] = useState('');
        const [modalLoading, setModalLoading] = useState(true);
        const [items] = useMockListData(() => {
            setModalLoading(false);
        }, {
            count
        });
        const itemsToRender = useMemo(() => {
            if (search.trim()) {
                const filterRegex = createStringMatcher(search, 'boundary');
                return items.filter(({ primary }) => filterRegex.test(primary));
            }
            return items;
        }, [items, search]);
        return (<Modal heading={args.name}>
        <ViewAll loading={loading || modalLoading} items={itemsToRender} actions={[
                {
                    id: 'addNew',
                    text: `Add ${name}`
                }
            ]} searchInputProps={{ onSearchChange: setSearch }}/>
      </Modal>);
    };
    const { create: createModal } = useModalManager();
    const [loading, setLoading] = useState(true);
    const [items] = useMockListData(() => {
        setLoading(false);
    }, { count: 3 });
    const itemsToRender = items.map(item => {
        return {
            ...item,
            secondary: args.showSecondary ? item.secondary : undefined,
            visual: args.showVisual ? item.visual : undefined,
            actions: args.showActions
                ? ['Action 1', 'Action 2', 'Action 3'].map(text => ({
                    text,
                    id: text
                }))
                : undefined
        };
    });
    return (<SummaryList name={args.name} icon={args.icon} count={args.loading || loading ? undefined : args.count} items={args.noItems ? [] : itemsToRender} loading={args.loading || loading} noItemsText={args.noItemsText} actions={[
            {
                text: 'Add',
                id: `${args.name}:addNew`,
                icon: 'plus',
                onClick() {
                    createModal(() => {
                        return (<Modal heading={`Add new ${args.name}`}>
                  {`Content for adding new ${args.name} goes here…`}
                </Modal>);
                    });
                }
            }
        ]} onViewAll={() => {
            createModal(SummaryListViewAllModal, {
                name: args.name,
                count: args.count,
                loading: args.loading
            });
        }}/>);
};
//# sourceMappingURL=SummaryList.stories.jsx.map