import { useState } from 'react';
import { AppShell, CaseView } from '@pega/cosmos-react-wss';
import { Stages } from '@pega/cosmos-react-work';
import { Grid } from '@pega/cosmos-react-core';
import { StyledSummaryPrimaryList, StyledSummarySecondaryList } from '@pega/cosmos-react-work/lib/components/CaseView/CaseView.styles';
import { AttachmentsMock } from '../../work/CaseView/Attachments.mocks';
import { FeedDemo } from '../../social/Feed/Feed.stories';
import { casePreviewPrimaryFields, casePreviewSecondaryFields } from '../../work/CaseView/CaseView.mocks';
import { TasksDemo } from '../../work/Tasks/Tasks.stories';
import { getPromotedActions } from './CaseView.mocks';
export default {
    title: 'Web Self Service/CaseView',
    component: CaseView,
    parameters: {
        layout: 'fullscreen'
    }
};
export const CaseViewDemo = (args) => {
    const [, setMainContent] = useState('Home');
    return (<AppShell main={<CaseView caseId='1234' heading='I have an issue that is impacting my work and I need help' actions={[{ id: '1', text: 'Some text' }]} tasks={{ label: 'Tasks', content: <TasksDemo /> }} promotedActions={getPromotedActions(args.promotedActions ?? 0)} stages={args.showStagesRegion
                ? {
                    label: 'Stages',
                    content: (<Stages stages={[
                            { name: 'Create', id: '1', completed: true },
                            { name: 'Troubleshoot', id: '2', completed: false },
                            { name: 'Resolve', id: '3', completed: false }
                        ]} current=''/>)
                }
                : undefined} summary={args.showSummaryRegion
                ? {
                    label: 'Summary',
                    content: (<Grid container={{ rowGap: 2, pad: [1.5, 2] }}>
                      <StyledSummaryPrimaryList variant='stacked' fields={casePreviewPrimaryFields} aria-label='Primary summary fields'/>

                      <StyledSummarySecondaryList variant='inline' fields={casePreviewSecondaryFields} aria-label='Secondary summary fields'/>
                    </Grid>)
                }
                : undefined} feed={args.showPulseRegion ? { label: 'Feed', content: <FeedDemo /> } : undefined} utility={args.showUtilitiesRegion
                ? { label: 'Utility', content: <AttachmentsMock /> }
                : undefined}/>} appInfo={{
            appName: 'App name',
            imageSrc: 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg'
        }} navLinks={Array.from({
            length: 3
        }).map((_, index) => {
            const navName = `Navigation ${index + 1}`;
            return {
                id: `nav-${index + 1}`,
                text: navName,
                href: '#',
                onClick: () => setMainContent(navName)
            };
        })} operator={{
            avatar: { name: 'hello' },
            title: 'title',
            actions: [
                { id: 'profile', primary: 'My profile', href: '#' },
                { id: 'settings', primary: 'Settings', href: '#' },
                { id: 'logOut', primary: 'Log out', href: '#' }
            ]
        }}/>);
};
CaseViewDemo.args = {
    showStagesRegion: true,
    showUtilitiesRegion: true,
    showSummaryRegion: true,
    showPulseRegion: true,
    promotedActions: 1
};
CaseViewDemo.argTypes = {
    showStagesRegion: { control: { type: 'boolean' } },
    showUtilitiesRegion: { control: { type: 'boolean' } },
    showSummaryRegion: { control: { type: 'boolean' } },
    showPulseRegion: { control: { type: 'boolean' } },
    promotedActions: { control: { type: 'select' }, options: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10] }
};
//# sourceMappingURL=CaseView.stories.jsx.map