import { useState } from 'react';
import { registerIcon } from '@pega/cosmos-react-core';
import { IntelligentGuidance } from '@pega/cosmos-react-work';
import * as userSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/user-solid.icon';
registerIcon(userSolidIcon);
export default {
    title: 'Work/IntelligentGuidance',
    component: IntelligentGuidance,
    parameters: {
        layout: 'fullscreen'
    }
};
export const IntelligentGuidanceDemo = () => {
    const [previousItems, setPreviousItems] = useState([]);
    const [currentItems, setCurrentItems] = useState([
        {
            id: '1',
            label: 'Change address',
            icon: 'clipboard',
            type: 'Task',
            onDismiss: () => {
                const currentItem = currentItems.find(item => item.id === '1');
                if (currentItem) {
                    setPreviousItems(prevItems => [
                        ...prevItems,
                        {
                            ...currentItem,
                            new: false,
                            onDismiss: undefined
                        }
                    ]);
                }
                setCurrentItems(prevItems => prevItems.filter(item => item.id !== '1'));
            },
            onClick: () => { }
        },
        {
            id: '2',
            label: 'Update contact profile',
            icon: 'polaris',
            type: 'Knowledge Article',
            onClick: () => {
                setCurrentItems(prevItems => prevItems.map(item => (item.id === '2' ? { ...item, new: false } : item)));
            },
            onDismiss: () => {
                const currentItem = currentItems.find(item => item.id === '2');
                if (currentItem) {
                    setPreviousItems(prevItems => [
                        ...prevItems,
                        {
                            ...currentItem,
                            new: false,
                            onDismiss: undefined
                        }
                    ]);
                }
                setCurrentItems(prevItems => prevItems.filter(item => item.id !== '2'));
            },
            new: true
        },
        {
            id: '3',
            label: 'Task suggestion',
            icon: 'polaris',
            type: 'Reason detected',
            onClick: () => {
                setCurrentItems(prevItems => prevItems.map(item => (item.id === '3' ? { ...item, new: false } : item)));
            },
            onDismiss: () => {
                const currentItem = currentItems.find(item => item.id === '3');
                if (currentItem) {
                    setPreviousItems(prevItems => [
                        ...prevItems,
                        {
                            ...currentItem,
                            new: false,
                            onDismiss: undefined
                        }
                    ]);
                }
                setCurrentItems(prevItems => prevItems.filter(item => item.id !== '3'));
            },
            new: true
        },
        {
            id: '4',
            label: 'Demo item',
            icon: 'polaris',
            type: 'Demo',
            onClick: () => {
                setCurrentItems(prevItems => prevItems.map(item => (item.id === '4' ? { ...item, new: false } : item)));
            },
            onDismiss: () => {
                const currentItem = currentItems.find(item => item.id === '4');
                if (currentItem) {
                    setPreviousItems(prevItems => [
                        ...prevItems,
                        {
                            ...currentItem,
                            new: false,
                            onDismiss: undefined
                        }
                    ]);
                }
                setCurrentItems(prevItems => prevItems.filter(item => item.id !== '4'));
            },
            new: true
        }
    ]);
    const [isCollapsed, setIsCollapsed] = useState(true);
    return (<IntelligentGuidance items={currentItems} previousItems={previousItems} heading='Suggested actions' isCollapsed={isCollapsed} onExpandCollapse={() => {
            setIsCollapsed(prevState => !prevState);
        }}/>);
};
//# sourceMappingURL=IntelligentGuidance.stories.jsx.map