import { useEffect, useMemo, useRef, useState } from 'react';
import createDOMPurify from 'dompurify';
import styled, { css } from 'styled-components';
import { Button, Link, createStringMatcher, Modal, SummaryList, useModalManager, useElement, ViewAll, Status, Flex, Grid, registerIcon, Banner, createUID, useBreakpoint, Avatar, Tabs, TabPanel, Card, CardHeader, Text } from '@pega/cosmos-react-core';
import { Glimpse, CaseView, CasePreview, UtilitySummaryItemDialog } from '@pega/cosmos-react-work';
import { RichTextViewer } from '@pega/cosmos-react-rte';
import * as userSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/user-solid.icon';
import { loadingTimeoutMS } from '../../core/Progress/Progress.mocks';
import { PredictionsDemo } from '../Predictions/Predictions.stories';
import { useMockListData } from '../../core/SummaryList/SummaryList.mocks';
import { StakeHoldersDemo } from '../Stakeholders/Stakeholders.stories';
import { TagsDemo } from '../Tags/Tags.stories';
import { StagesDemo } from '../Stages/Stages.stories';
import { AssignmentsDemo } from '../Assignments/Assignments.stories';
import useGenAIcoach from '../GenAICoach/useGenAICoach';
import { CaseHierarchyDemo } from '../CaseHierarchy/CaseHierarchy.stories';
import { PulseMock } from './Pulse.mocks';
import { Details } from './Details.mocks';
import { AttachmentsMock } from './Attachments.mocks';
registerIcon(userSolidIcon);
const DOMPurify = createDOMPurify();
const StyledRSWrapper = styled.div(({ theme }) => css `
    display: grid;
    place-items: center;
    border: 0.1875rem dashed ${theme.base.palette['border-line']};
    min-height: 6rem;
    height: var(--content-height-in-view);
    border-radius: calc(${theme.components.card['border-radius']});
  `);
const RSTable = () => {
    return (<article style={{ display: 'block' }}>
      <StyledRSWrapper className='rs-wrapper'>
        <Text variant='secondary'>Table goes here</Text>
      </StyledRSWrapper>
    </article>);
};
const TableSizingTabs = ({ tabCount = 3 }) => {
    const [currentTabId, setCurrentTabId] = useState('1');
    const tabsRef = useRef(null);
    const tabs = [
        { name: 'Tab 1', id: '1' },
        { name: 'Tab 2', id: '2' },
        { name: 'Tab 3', id: '3' }
    ].slice(0, tabCount);
    return (<Flex container={{ direction: 'column' }}>
      <Tabs tabs={tabs} type='horizontal' onTabClick={id => {
            setCurrentTabId(id);
        }} currentTabId={currentTabId} ref={tabsRef}/>
      {tabs.map(tab => (<TabPanel tabId={tab.id} currentTabId={currentTabId} key={tab.id} tablistRef={tabsRef}>
          <Flex container={{ direction: 'column', gap: 1 }}>
            {(() => {
                switch (tab.id) {
                    case '1':
                        return <RSTable />;
                    case '2':
                        return (<>
                      <RSTable />
                      <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
                        non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                      </p>
                    </>);
                    case '3':
                        return <TableSizingTabs tabCount={2}/>;
                    default:
                        return null;
                }
            })()}
          </Flex>
        </TabPanel>))}
    </Flex>);
};
export const caseId = 'C-123456';
export const createDate = new Date(2016, 1, 8);
const msInYear = 1000 * 60 * 60 * 24 * 365;
const diffInYears = Math.floor((Date.now() - createDate.getTime()) / msInYear);
export const tabLabels = [
    'Details',
    'Pulse',
    'Case relationships',
    'Single table',
    'Sub tab table',
    'Multiple tables'
];
export const baseCaseTabs = tabLabels.map((name) => {
    return {
        name,
        id: name
    };
});
const singularize = (s = '') => s.replace(/s$/i, '').toLowerCase();
export const MockSummaryListViewAllModal = ({ name, count }) => {
    const [search, setSearch] = useState('');
    const [loading, setLoading] = useState(true);
    const [items] = useMockListData(() => {
        setLoading(false);
    }, {
        count
    });
    const onSearchChange = (value) => {
        setSearch(value.trim());
    };
    const itemsToRender = useMemo(() => {
        if (search) {
            const regEx = createStringMatcher(search, 'boundary');
            return items.filter(({ primary, id }) => regEx.test(primary) || regEx.test(id));
        }
        return items;
    }, [items, search]);
    return (<Modal heading={name}>
      <ViewAll loading={loading} items={itemsToRender} actions={[
            {
                id: 'addNew',
                text: `Add ${singularize(name)}`
            }
        ]} searchInputProps={{ onSearchChange }}/>
    </Modal>);
};
export const MockSummaryList = ({ icon, name, actions, limit }) => {
    const { create: createModal } = useModalManager();
    const [loading, setLoading] = useState(true);
    const count = 50;
    const [items] = useMockListData(() => {
        setLoading(false);
    }, { count: limit });
    return (<SummaryList loading={loading} items={items} icon={icon} name={name} headingTag='h3' count={loading ? undefined : count} actions={actions !== null
            ? [
                {
                    text: 'Add',
                    id: `${name}:addNew`,
                    icon: 'plus',
                    onClick() {
                        createModal(() => {
                            const singularName = singularize(name);
                            return (<Modal heading={`Add new ${singularName}`}>
                        {`Content for adding a new ${singularName} goes here…`}
                      </Modal>);
                        });
                    }
                }
            ]
            : undefined} onViewAll={() => {
            createModal(MockSummaryListViewAllModal, {
                name,
                count
            });
        }}/>);
};
export const MockOperatorFieldValue = () => {
    const [target, setTarget] = useElement(null);
    return (<>
      <Button variant='link' onClick={(e) => {
            setTarget(e.currentTarget);
        }}>
        constellation@pega.com
      </Button>
      {target && (<Glimpse id='constellation' target={target} onDismiss={() => setTarget(null)} heading={{
                primary: 'Constellation Operator',
                secondary: 'Director of the stars',
                visual: <Avatar name='Constellation Operator'/>
            }} fields={[
                {
                    id: '1',
                    name: 'Department',
                    value: 'Space Travel'
                },
                {
                    id: '2',
                    name: 'Manager',
                    value: 'Captain Galaxy'
                },
                {
                    id: '3',
                    name: 'Location',
                    value: 'A galaxy far away'
                },
                {
                    id: '4',
                    name: 'Email',
                    value: <Link href='mailto:constellation@pega.com'>constellation@pega.com</Link>
                },
                {
                    id: '5',
                    name: 'Telephone',
                    value: <Link href='tel:555-123-4567'>555-123-4567</Link>
                }
            ]} onViewProfile={() => { }}/>)}
    </>);
};
export const PreviewLinkComponent = ({ token: linkToken, setPreviewCaseId, setPreviewCurrentTabId }) => {
    return (<Link href={linkToken.href} previewable onPreview={() => {
            setPreviewCaseId(linkToken.href);
            setPreviewCurrentTabId(`summary-${linkToken.href}`);
        }}>
      {linkToken.text}
    </Link>);
};
export const getCaseHierarchyNodes = ({ setPreviewCaseId, setPreviewCurrentTabId }) => [
    {
        id: caseId,
        label: 'Constellation',
        secondary: caseId,
        expanded: true,
        nodes: [
            {
                id: 'C-456',
                label: 'Previewable Case',
                secondary: 'C-456',
                href: '/cases/C-456',
                onPreview: () => {
                    setPreviewCaseId('C-456');
                    setPreviewCurrentTabId('summary-C-456');
                }
            },
            {
                id: 'C-789',
                label: 'Previewable Error',
                secondary: 'C-789',
                href: '/cases/C-789',
                onPreview: () => {
                    setPreviewCaseId('C-789');
                    setPreviewCurrentTabId('summary-C-789');
                }
            }
        ]
    }
];
export const getPulseMarkdownMap = ({ setPreviewCaseId, setPreviewCurrentTabId }) => {
    return {
        link: (linkToken) => {
            if (linkToken.href?.startsWith('C-')) {
                return () => (<PreviewLinkComponent token={linkToken} setPreviewCaseId={setPreviewCaseId} setPreviewCurrentTabId={setPreviewCurrentTabId}/>);
            }
        }
    };
};
export const onMentionPreview = ({ id, type, setPreviewCaseId, setPreviewCurrentTabId }) => {
    if (type === 'case') {
        setPreviewCaseId(id);
        setPreviewCurrentTabId(`summary-${id}`);
    }
};
export const getTabContent = ({ setPreviewCaseId, setPreviewCurrentTabId }) => {
    return [
        {
            id: 'Details',
            content: <Details />
        },
        {
            id: 'Pulse',
            content: (<PulseMock markdownMap={getPulseMarkdownMap({
                    setPreviewCaseId,
                    setPreviewCurrentTabId
                })} onMentionPreview={({ id, type }) => {
                    onMentionPreview({
                        id,
                        type,
                        setPreviewCaseId,
                        setPreviewCurrentTabId
                    });
                }}/>)
        },
        {
            id: 'Case relationships',
            content: (<CaseHierarchyDemo heading='Case relationships' numCases={3} numChildCases={3} loadMore/>)
        },
        {
            id: 'Single table',
            content: <RSTable />
        },
        {
            id: 'Sub tab table',
            content: <TableSizingTabs />
        },
        {
            id: 'Multiple tables',
            content: (<Card>
          <CardHeader>
            <Text variant='h2'>Multiple tables</Text>
          </CardHeader>
          <Flex container={{ direction: 'column', gap: 2 }}>
            <RSTable />
            <RSTable />
          </Flex>
        </Card>)
        },
        {
            id: 'not found',
            content: <h2>Not Found</h2>
        }
    ];
};
export const previewTabContent = [
    {
        id: 'Details',
        content: <Details />
    },
    {
        id: 'Pulse',
        content: <PulseMock />
    },
    {
        id: 'Single table',
        content: <RSTable />
    },
    {
        id: 'Sub tab table',
        content: <TableSizingTabs />
    },
    {
        id: 'Multiple tables',
        content: (<Card>
        <CardHeader>
          <Text variant='h2'>Multiple tables</Text>
        </CardHeader>
        <Flex container={{ direction: 'column', gap: 2 }}>
          <RSTable />
          <RSTable />
        </Flex>
      </Card>)
    },
    {
        id: 'not found',
        content: <h2>Not Found</h2>
    }
];
export const getPrimaryFields = () => {
    return [
        {
            name: 'Create date',
            value: createDate.toDateString()
        },
        {
            name: 'Member ID',
            value: 'M205435569FD1234567890'
        },
        {
            name: 'Assigned to',
            value: 'Dean Thomas'
        },
        {
            name: 'Priority',
            value: '95'
        }
    ].map((f, i) => ({ ...f, id: `p-${i}` }));
};
const baseSecondaryFields = [
    {
        name: 'Status',
        value: <Status variant='info'>New</Status>
    },
    {
        name: 'Update date',
        value: `${diffInYears} years ago`
    },
    {
        name: 'Description',
        value: (<RichTextViewer content='<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse commodo nulla vitae mi bibendum, a fringilla nisl efficitur. Praesent vitae nulla lobortis, finibus felis ultricies, fermentum mi. Nunc lorem ligula, placerat nec elit id, auctor pellentesque est.</p> </br> <p>Pellentesque pharetra justo augue, non maximus nulla venenatis et. Sed laoreet ultricies ullamcorper. Mauris ac nulla quis ipsum semper fringilla in eget risus. Fusce cursus sollicitudin nibh molestie volutpat.</p>' type='html'/>),
        simpleValue: DOMPurify.sanitize('<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse commodo nulla vitae mi bibendum, a fringilla nisl efficitur. Praesent vitae nulla lobortis, finibus felis ultricies, fermentum mi. Nunc lorem ligula, placerat nec elit id, auctor pellentesque est.</p> </br> <p>Pellentesque pharetra justo augue, non maximus nulla venenatis et. Sed laoreet ultricies ullamcorper. Mauris ac nulla quis ipsum semper fringilla in eget risus. Fusce cursus sollicitudin nibh molestie volutpat.</p>', {
            ALLOWED_TAGS: [],
            ALLOWED_ATTR: [],
            KEEP_CONTENT: true
        }),
        variant: 'stacked'
    }
];
export const getSecondaryFields = ({ setPreviewCaseId, setPreviewCurrentTabId }) => {
    return [
        ...baseSecondaryFields,
        {
            name: 'Created by',
            value: <MockOperatorFieldValue />
        },
        {
            name: 'Previewable case',
            value: (<Link href='/cases/C-456' previewable onPreview={() => {
                    setPreviewCaseId('C-456');
                    setPreviewCurrentTabId('summary-C-456');
                }}>
          Previewable Case - C-456
        </Link>)
        },
        {
            name: 'Previewable error',
            value: (<Link href='/cases/C-789' previewable onPreview={() => {
                    setPreviewCaseId('C-789');
                    setPreviewCurrentTabId('summary-C-789');
                }}>
          Previewable Error - C-789
        </Link>)
        }
    ];
};
export const casePreviewPrimaryFields = [
    {
        name: 'Member ID',
        value: 'M204859F438G'
    },
    {
        name: 'Priority',
        value: '95'
    }
];
export const casePreviewSecondaryFields = baseSecondaryFields;
export const getParentCases = ({ setPreviewCaseId, setPreviewCurrentTabId }) => {
    let ids = [];
    const randomId = (seed = 1) => {
        const x = Math.sin(seed);
        let rand = x - Math.floor(x);
        if (rand < 0.1) {
            rand += 0.1;
        }
        return Math.floor(rand * 1000000);
    };
    for (let i = 0; i < 5; i += 1) {
        ids.push(randomId(i + 1));
    }
    ids = ids.sort((a, b) => a - b);
    return ids.map(num => {
        const id = `C-${num}`;
        return {
            id,
            primary: id,
            href: `/cases/${id}`,
            previewable: true,
            onPreview: () => {
                setPreviewCaseId(id);
                setPreviewCurrentTabId(`summary-${id}`);
            }
        };
    });
};
export const Utilities = ({ predictions, attachments, stakeholders, casehierarchy, followers, tags, setPreviewCaseId, setPreviewCurrentTabId }) => {
    return (<>
      {predictions && <PredictionsDemo />}
      {attachments && <AttachmentsMock />}
      {stakeholders && <StakeHoldersDemo />}
      {followers && <MockSummaryList icon='user-star' name='Followers'/>}
      {tags && <TagsDemo />}
      {casehierarchy && (<CaseHierarchyDemo heading='Case relationships' currentCaseId={caseId} numCases={1} numChildCases={2} nodes={getCaseHierarchyNodes({ setPreviewCaseId, setPreviewCurrentTabId })}/>)}
    </>);
};
export const getUtilitiesSummaryItems = ({ predictions, attachments, stakeholders, followers, casehierarchy, tags, hideStakeholdersAddNew, setDialogName, setDialogTarget, setDialogContent, setShowDialog, dialogTarget, showDialog, setPreviewCaseId, setPreviewCurrentTabId }) => {
    const items = [];
    if (predictions)
        items.push({
            id: createUID(),
            iconName: 'polaris',
            name: 'Predictions',
            onClick: e => {
                if (dialogTarget !== e.currentTarget || !showDialog) {
                    setDialogName('Predictions');
                    setDialogTarget(e.currentTarget);
                    setDialogContent(<PredictionsDemo />);
                    setShowDialog(true);
                }
                else {
                    setDialogName(undefined);
                    setDialogTarget(null);
                    setShowDialog(false);
                }
            }
        });
    if (attachments)
        items.push({
            id: createUID(),
            iconName: 'paper-clip',
            count: 4,
            name: 'Attachments',
            onClick: e => {
                if (dialogTarget !== e.currentTarget || !showDialog) {
                    setDialogName('Attachments');
                    setDialogTarget(e.currentTarget);
                    setDialogContent(<AttachmentsMock />);
                    setShowDialog(true);
                }
                else {
                    setDialogName(undefined);
                    setDialogTarget(null);
                    setShowDialog(false);
                }
            }
        });
    if (stakeholders)
        items.push({
            id: createUID(),
            iconName: 'user-search-solid',
            count: 10,
            name: 'Stakeholders',
            onClick: e => {
                if (dialogTarget !== e.currentTarget || !showDialog) {
                    setDialogName('Stakeholders');
                    setDialogTarget(e.currentTarget);
                    setDialogContent(<StakeHoldersDemo hideAddNew={hideStakeholdersAddNew}/>);
                    setShowDialog(true);
                }
                else {
                    setDialogName(undefined);
                    setDialogTarget(null);
                    setShowDialog(false);
                }
            }
        });
    if (followers)
        items.push({
            id: createUID(),
            iconName: 'user-star-solid',
            count: 5,
            name: 'Followers',
            onClick: e => {
                if (dialogTarget !== e.currentTarget || !showDialog) {
                    setDialogName('Followers');
                    setDialogTarget(e.currentTarget);
                    setDialogContent(<MockSummaryList icon='user-star' name='Followers'/>);
                    setShowDialog(true);
                }
                else {
                    setDialogName(undefined);
                    setDialogTarget(null);
                    setShowDialog(false);
                }
            }
        });
    if (tags)
        items.push({
            id: createUID(),
            iconName: 'tag',
            count: 10,
            name: 'Tags',
            onClick: e => {
                if (dialogTarget !== e.currentTarget || !showDialog) {
                    setDialogName('Tags');
                    setDialogTarget(e.currentTarget);
                    setDialogContent(<TagsDemo />);
                    setShowDialog(true);
                }
                else {
                    setDialogName(undefined);
                    setDialogTarget(null);
                    setShowDialog(false);
                }
            }
        });
    if (casehierarchy)
        items.push({
            id: createUID(),
            iconName: 'folder-nested',
            count: 3,
            name: 'Case relationships',
            onClick: e => {
                if (dialogTarget !== e.currentTarget || !showDialog) {
                    setDialogName('Case Hierarchy');
                    setDialogTarget(e.currentTarget);
                    setDialogContent(<CaseHierarchyDemo heading='Case relationships' currentCaseId={caseId} numCases={1} numChildCases={2} nodes={getCaseHierarchyNodes({ setPreviewCaseId, setPreviewCurrentTabId })}/>);
                    setShowDialog(true);
                }
                else {
                    setDialogName(undefined);
                    setDialogTarget(null);
                    setShowDialog(false);
                }
            }
        });
    return items;
};
export const getCaseActions = () => {
    return Array.from({ length: 12 }, (_, i) => {
        return {
            text: `Action ${i + 1}`,
            id: `${i + 1}`,
            onClick: () => { }
        };
    });
};
const getHeading = (size) => {
    return {
        short: 'Constellation',
        medium: 'Complicated constellation demo case of some distinction',
        long: 'The scenario in this case is almost too obscure to put into words and so the title is quite long'
    }[size];
};
export const getPromotedActions = (count) => {
    return [
        {
            id: createUID(),
            text: 'Reassign',
            onClick: () => { }
        },
        {
            id: createUID(),
            text: 'Add dependency',
            onClick: () => { }
        },
        {
            id: createUID(),
            text: 'Clone',
            onClick: () => { }
        },
        {
            id: createUID(),
            text: 'Move',
            onClick: () => { }
        },
        {
            id: createUID(),
            text: 'Withdraw',
            onClick: () => { }
        }
    ].slice(0, count);
};
const StyledPersistentUtilityContent = styled.div `
  height: 100%;
`;
export const PersistentUtilityContent = () => {
    return (<Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledPersistentUtilityContent}>
      Persistent utility content
    </Flex>);
};
export const CaseViewMock = ({ caseId: caseIdProp, icon, heading, subheading, parentCases = false, promotedActions = 1, summaryFields = 'All', tabs, stages = true, tasks = true, taskCount = 4, utilitiesExpanded: utilitiesExpandedProp = true, predictions = true, attachments = true, stakeholders = true, casehierarchy = true, followers = true, tags = true, persistentUtility = false, intelligentGuidance = false, banner = false, headingLength, defaultExpanded, hideStakeholdersAddNew, additionalActions, enableGenAICoach, showGenAICoachErrorMessage, showUtilityNotification, showPersistentUtilityExpand }) => {
    const [previewCaseId, setPreviewCaseId] = useState(null);
    const [progress, setProgress] = useState(false);
    const [error, setError] = useState(false);
    const [previewCurrentTabId, setPreviewCurrentTabId] = useState(baseCaseTabs[0].id);
    const isMediumOrAbove = useBreakpoint('md');
    const [demoCurrentTabId, setDemoCurrentTabId] = useState(isMediumOrAbove ? tabs?.currentTabId ?? baseCaseTabs[0].id : `summary-${caseIdProp}`);
    const [dialogName, setDialogName] = useState();
    const [dialogContent, setDialogContent] = useState();
    const [dialogTarget, setDialogTarget] = useElement();
    const [showDialog, setShowDialog] = useState(false);
    const demoTabs = tabs ?? {
        items: baseCaseTabs,
        currentTabId: demoCurrentTabId,
        onClick: setDemoCurrentTabId
    };
    const previewTabs = {
        items: baseCaseTabs,
        currentTabId: previewCurrentTabId,
        onClick: setPreviewCurrentTabId
    };
    const parentCasesContent = getParentCases({
        caseId: caseIdProp,
        setPreviewCaseId,
        setPreviewCurrentTabId
    });
    const demoStages = <StagesDemo currentStage={3}/>;
    const [followed, setFollowed] = useState(false);
    const [summaryExpanded, setSummaryExpanded] = useState(!!defaultExpanded);
    const [utilitiesExpanded, setUtilitiesExpanded] = useState(utilitiesExpandedProp);
    const [utilities, setUtilities] = useState(getUtilitiesSummaryItems({
        predictions,
        attachments,
        stakeholders,
        casehierarchy,
        followers,
        tags,
        hideStakeholdersAddNew,
        setDialogName,
        setDialogTarget,
        setDialogContent,
        setShowDialog,
        setPreviewCaseId,
        setPreviewCurrentTabId,
        dialogTarget,
        showDialog
    }));
    useEffect(() => {
        const timeout = setTimeout(() => {
            if (showUtilityNotification) {
                setUtilities(prevItems => prevItems.map(item => ['paper-clip', 'user-star-solid'].includes(item.iconName)
                    ? { ...item, count: item.count ? item.count + 1 : 0 }
                    : item));
            }
        }, 5000);
        return () => clearTimeout(timeout);
    }, [showUtilityNotification]);
    const tabContent = getTabContent({
        setPreviewCaseId,
        setPreviewCurrentTabId
    });
    useEffect(() => {
        setError(false);
        if (previewCaseId) {
            setProgress(true);
            setTimeout(() => {
                setProgress(false);
                if (previewCaseId === 'C-789') {
                    setError(true);
                }
            }, loadingTimeoutMS);
        }
        else {
            setProgress(false);
        }
    }, [previewCaseId]);
    const genAICoachProps = useGenAIcoach({
        enableGenAICoach,
        showGenAICoachErrorMessage
    });
    return (<>
      <CasePreview open={!!previewCaseId} progress={progress} error={error} onErrorRetry={() => {
            setPreviewCurrentTabId(`summary-${previewCaseId}-1`);
            setPreviewCaseId(curr => `${curr}-1`);
        }} onAfterClose={() => {
            setPreviewCaseId(null);
        }} caseId={previewCaseId || ''} parentCases={Math.random() > 0.5
            ? [...parentCasesContent]
                .filter(c => c.id !== previewCaseId)
                .map(c => ({ ...c, id: `preview-${c.id}` }))
            : undefined} heading='Previewable demo case' subheading={previewCaseId || ''} caseLink={{ href: `/cases/${previewCaseId}`, target: '_blank' }} icon='user-solid' followed={!followed} onEdit={() => { }} actions={additionalActions ? getCaseActions() : undefined} promotedActions={getPromotedActions(2)} summaryFields={{
            primary: casePreviewPrimaryFields,
            secondary: casePreviewSecondaryFields
        }} stages={demoStages} tasks={<AssignmentsDemo count={4}/>} tabs={previewTabs} tabContent={tabContent} utilities={<Grid container={{ rowGap: 2 }}>
            <Utilities predictions={predictions} attachments={attachments} stakeholders={stakeholders} casehierarchy={casehierarchy} followers={followers} tags={tags} setPreviewCaseId={setPreviewCaseId} setPreviewCurrentTabId={setPreviewCurrentTabId}/>
          </Grid>}/>

      {dialogName && dialogTarget && showDialog && (<UtilitySummaryItemDialog name={dialogName} target={dialogTarget} onDismiss={() => {
                setShowDialog(false);
            }}>
          {dialogContent}
        </UtilitySummaryItemDialog>)}
      <CaseView caseId={caseIdProp} parentCases={parentCases
            ? getParentCases({
                caseId: caseIdProp,
                setPreviewCaseId,
                setPreviewCurrentTabId
            })
            : undefined} heading={headingLength ? getHeading(headingLength) : heading} subheading={subheading} icon={icon} followed={followed} onFollowedChange={setFollowed} actions={additionalActions ? getCaseActions() : undefined} promotedActions={promotedActions ? getPromotedActions(promotedActions) : undefined} onEdit={() => { }} summaryFields={(() => {
            const obj = {
                primary: getPrimaryFields(),
                secondary: getSecondaryFields({
                    setPreviewCaseId,
                    setPreviewCurrentTabId
                })
            };
            if (summaryFields === 'Primary only') {
                obj.secondary = undefined;
            }
            if (summaryFields === 'Secondary only') {
                obj.primary = undefined;
            }
            return obj;
        })()} summaryExpanded={summaryExpanded} onToggleSummary={() => {
            setSummaryExpanded(cur => !cur);
        }} tabs={demoTabs} persistentUtility={(() => {
            if (typeof persistentUtility === 'boolean') {
                return persistentUtility
                    ? {
                        title: 'Persistent utility',
                        content: <PersistentUtilityContent />,
                        showExpand: showPersistentUtilityExpand
                    }
                    : undefined;
            }
            return persistentUtility;
        })()} stages={stages ? demoStages : undefined} tasks={tasks ? <AssignmentsDemo count={taskCount}/> : undefined} tabContent={tabContent} utilities={<Utilities predictions={predictions} attachments={attachments} stakeholders={stakeholders} casehierarchy={casehierarchy} followers={followers} tags={tags} setPreviewCaseId={setPreviewCaseId} setPreviewCurrentTabId={setPreviewCurrentTabId}/>} utilitiesSummaryItems={utilities} utilitiesExpanded={utilitiesExpanded} onToggleUtilities={() => {
            setUtilitiesExpanded(cur => !cur);
        }} intelligentGuidance={intelligentGuidance} banners={banner ? (<Banner variant='urgent' messages={[
                {
                    label: 'An error occurred',
                    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
                    action: {
                        text: 'Take acton'
                    }
                }
            ]}/>) : undefined} genAICoachProps={genAICoachProps ?? undefined}/>
    </>);
};
//# sourceMappingURL=CaseView.mocks.jsx.map