import { useState } from 'react';
import { AppShell } from '@pega/cosmos-react-wss';
import { Banner, Icon } from '@pega/cosmos-react-core';
import { DefaultMainContent, notificationItems } from './AppShell.mocks';
export default {
    title: 'Web Self Service/AppShell',
    component: AppShell,
    parameters: {
        layout: 'fullscreen'
    }
};
export const AppShellDemo = (args) => {
    const [mainContent, setMainContent] = useState('Home');
    const [notifications, setNotifications] = useState(notificationItems);
    const [numNewNotifications, setNumNewNotifications] = useState(notifications.filter(x => x.unread).length);
    const handleNotificationClick = (passedId) => {
        setNotifications(cur => cur.map(({ id, unread, ...item }) => ({
            id,
            unread: passedId === id ? false : unread,
            ...item
        })));
    };
    const [contexts, setContexts] = useState([
        {
            id: '1',
            primary: 'Medical',
            selected: true,
            visual: <Icon name='heart-pulse-solid'/>
        },
        {
            id: '2',
            primary: 'Vision',
            selected: false,
            visual: <Icon name='glasses-solid'/>
        }
    ]);
    return (<AppShell main={args.mainContent ?? <DefaultMainContent content={mainContent} banners={args.banner}/>} banners={args.banner ? <Banner variant='urgent' messages={['Example banner']}/> : undefined} appInfo={{
            appName: args.appName ?? 'Service Desk',
            imageSrc: args.imageSrc,
            onClick: () => setMainContent('Home')
        }} contextSwitcher={{
            contexts,
            onContextClick: (id) => setContexts(cur => cur.map(ctx => ({ ...ctx, selected: id === ctx.id })))
        }} navLinks={Array.from({
            length: args.numberOfNavLinks ?? 3
        }).map((_, index) => {
            const navName = `Navigation ${index + 1}`;
            return {
                id: `nav-${index + 1}`,
                text: navName,
                href: '#',
                onClick: () => setMainContent(navName),
                active: navName === mainContent
            };
        })} operator={{
            avatar: { name: args.operatorName ?? 'Cindy Turner' },
            title: args.operatorTitle ?? 'Account',
            actions: [
                { id: 'profile', primary: 'My profile', href: '#' },
                { id: 'settings', primary: 'Settings', href: '#' },
                { id: 'logOut', primary: 'Log out', href: '#' }
            ]
        }} notifications={{
            title: 'Notifications',
            count: numNewNotifications,
            items: args.notificationsEmpty ? [] : notifications,
            onItemClick: handleNotificationClick,
            loading: args.notificationsLoading,
            onNotificationsOpen: () => {
                setNumNewNotifications(0);
            }
        }} navAlignment={args.navAlignment} navPosition={args.navPosition}/>);
};
AppShellDemo.args = {
    imageSrc: 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',
    appName: 'Service Desk',
    banner: false,
    numberOfNavLinks: 3,
    navAlignment: 'end',
    navPosition: 'inline',
    operatorName: 'Cindy Turner',
    operatorTitle: 'Account',
    notificationsEmpty: false,
    notificationsLoading: false
};
AppShellDemo.argTypes = {
    imageSrc: { control: { type: 'text' } },
    appName: { control: { type: 'text' } },
    banner: { control: { type: 'boolean' } },
    numberOfNavLinks: { control: { type: 'number' } },
    navAlignment: { options: ['start', 'center', 'end'], control: { type: 'select' } },
    navPosition: { options: ['inline', 'below'], control: { type: 'select' } },
    operatorName: { control: { type: 'text' } },
    operatorTitle: { control: { type: 'text' } },
    notificationsEmpty: { control: { type: 'boolean' } },
    notificationsLoading: { control: { type: 'boolean' } }
};
//# sourceMappingURL=AppShell.stories.jsx.map