import { useState, useMemo } from 'react';
import { Banner, Button, CategorySubPage, ComboBox, DashboardPage, TabbedPage, OneColumnPage, TwoColumnPage, ThreeColumnPage, FourColumnPage, WideNarrowPage, NarrowWidePage, WideWideNarrowPage, NarrowWideWidePage, NarrowWideNarrowPage, icons, menuHelpers, createUID, Table, Text, StyledRegion, DynamicLayoutPage, GridLayoutViewer } from '@pega/cosmos-react-core';
import { UtilitiesLayout } from '@pega/cosmos-react-work';
import useGenAICoach from '../../work/GenAICoach/useGenAICoach';
import { FeedDemo } from '../../social/Feed/Feed.stories';
import { TasksDemo } from '../../work/Tasks/Tasks.stories';
import { MockSummaryList } from '../../work/CaseView/CaseView.mocks';
import { commitsData } from '../Table/Table.mocks';
import { AppShellDemo } from '../AppShell/AppShell.stories';
import { StyledDemoTableWrapper, StyledGridViewerWrapper, StyledStoryPage } from './PageTemplates.styles';
import { getPath } from './PageTemplates.mocks';
import { getDefaultGridConfig, deriveGridChildren, gridBreakpointSetup } from './GridLayout.mocks';
export default {
    title: 'Core/PageTemplates',
    parameters: {
        layout: 'fullscreen'
    }
};
export const ColumnPageDemo = (args) => {
    const actions = args.showActions && (<>
      <Button>Page action 1</Button>
      <Button>Page action 2</Button>
    </>);
    const banners = args.showBanners && (<Banner variant='warning' messages={['This is a warning banner. You have been warned!']}/>);
    const genAICoachProps = useGenAICoach({ enableGenAICoach: args.showUtilities });
    const pageTemplateProps = {
        scrollContent: args.scrollContent,
        title: args.title || 'Demo page',
        icon: args.showIcon ? args.icon : undefined,
        actions,
        banners,
        path: getPath(args.showBreadcrumbs, args.pathData),
        as: args.template !== 'demo page' ? StyledStoryPage : undefined,
        utilities: args.showUtilities && genAICoachProps && (<UtilitiesLayout genAICoachProps={genAICoachProps}/>)
    };
    let page;
    switch (args.template) {
        case 'one column':
            page = <OneColumnPage a='a' {...pageTemplateProps}/>;
            break;
        case 'two column':
            page = <TwoColumnPage a='a' b='b' {...pageTemplateProps}/>;
            break;
        case 'three column':
            page = <ThreeColumnPage a='a' b='b' c='c' {...pageTemplateProps}/>;
            break;
        case 'four column':
            page = <FourColumnPage a='a' b='b' c='c' d='d' {...pageTemplateProps}/>;
            break;
        case 'wide narrow':
            page = <WideNarrowPage a='a' b='b' {...pageTemplateProps}/>;
            break;
        case 'narrow wide':
            page = <NarrowWidePage a='a' b='b' {...pageTemplateProps}/>;
            break;
        case 'wide wide narrow':
            page = <WideWideNarrowPage a='a' b='b' c='c' {...pageTemplateProps}/>;
            break;
        case 'narrow wide wide':
            page = <NarrowWideWidePage a='a' b='b' c='c' {...pageTemplateProps}/>;
            break;
        case 'narrow wide narrow':
            page = <NarrowWideNarrowPage a='a' b='b' c='c' {...pageTemplateProps}/>;
            break;
        case 'demo page':
        default:
            page = (<TwoColumnPage a={<FeedDemo />} b={<>
              <TasksDemo />
              <MockSummaryList name='My team' limit={10} actions={null}/>
            </>} {...pageTemplateProps}/>);
            break;
    }
    return <AppShellDemo main={page} appHeader/>;
};
ColumnPageDemo.args = {
    template: 'demo page',
    scrollContent: false,
    title: 'Demo page',
    icon: 'home-solid',
    showIcon: true,
    showBreadcrumbs: true,
    pathData: 'Page 1: Maximus gravida augue nec fermentum,Page2: Lorem ipsum dolor sit amet,Page 3: Phasellus commodo, diam ut rhoncus auctor,Page 4: In tincidunt ex eu mi tincidunt, a lobortis nunc tempor,Page 5: In tincidunt ex eu mi tincidunt',
    showActions: true,
    showBanners: false,
    showUtilities: true
};
ColumnPageDemo.argTypes = {
    template: {
        options: [
            'demo page',
            'one column',
            'two column',
            'three column',
            'four column',
            'wide narrow',
            'narrow wide',
            'wide wide narrow',
            'narrow wide wide',
            'narrow wide narrow'
        ],
        control: { type: 'select' }
    },
    scrollContent: { control: { type: 'boolean' } },
    title: { control: { type: 'text' } },
    icon: { options: [...icons], control: { type: 'select', icons: true } },
    showIcon: { control: { type: 'boolean' } },
    showBreadcrumbs: { control: { type: 'boolean' } },
    pathData: { control: { type: 'text' } },
    showActions: { control: { type: 'boolean' } },
    showBanners: { control: { type: 'boolean' } },
    showUtilities: { control: { type: 'boolean' } }
};
export const DashboardPageDemo = (args) => {
    const FilterComboBox = () => {
        const [filterSearchValue, setFilterSearchValue] = useState('');
        const [filterOptions, setFilterOptions] = useState(() => Array.from({ length: 10 }, (_, i) => ({
            id: createUID(),
            primary: `Filter ${i + 1}`,
            selected: false
        })));
        const selected = useMemo(() => {
            return menuHelpers
                .getSelected(filterOptions)
                .map(item => ({ text: item.primary, id: item.id }));
        }, [filterOptions]);
        const toggleItem = (id) => {
            setFilterOptions(cur => menuHelpers.toggleSelected(cur, id, 'multi-select'));
        };
        return (<ComboBox mode='multi-select' label='Filters' placeholder='Choose filters' value={filterSearchValue} onChange={e => {
                setFilterSearchValue(e.target.value);
            }} selected={{ items: selected, onRemove: toggleItem }} menu={{
                items: filterSearchValue
                    ? menuHelpers
                        .flatten(filterOptions)
                        .filter(({ primary }) => primary.includes(filterSearchValue))
                    : filterOptions,
                emptyText: 'No filters',
                onItemClick: toggleItem
            }}/>);
    };
    const filterControls = Array.from({ length: args.numberOfFilters || 3 }, (_, i) => (<FilterComboBox key={i}/>));
    const genAICoachProps = useGenAICoach({ enableGenAICoach: args.showUtilities });
    return (<AppShellDemo main={<DashboardPage a='a' b='b' c='c' path={getPath()} filters={filterControls} filterPosition={args.filterPosition} fitToViewport title={args.title || 'Dashboard'} as={StyledStoryPage} utilities={genAICoachProps &&
                args.showUtilities && <UtilitiesLayout genAICoachProps={genAICoachProps}/>}/>} appHeader/>);
};
DashboardPageDemo.args = {
    title: 'Dashboard',
    filterPosition: 'block-start',
    numberOfFilters: 3,
    showUtilities: true
};
DashboardPageDemo.argTypes = {
    title: { control: { type: 'text' } },
    filterPosition: {
        options: ['block-start', 'inline-start', 'inline-end'],
        control: { type: 'select' }
    },
    numberOfFilters: { control: { type: 'number' } },
    showUtilities: { control: { type: 'boolean' } }
};
export const CategorySubPageDemo = (args) => {
    const [activeItem, setActiveItem] = useState('Profile');
    const mockNavLinks = (itemTextArray) => {
        return itemTextArray.map(itemText => {
            return {
                text: itemText,
                active: itemText === activeItem,
                href: '#',
                onClick: (event) => setActiveItem(event.target.textContent || '')
            };
        });
    };
    return (<AppShellDemo main={<CategorySubPage viewLoading={args.viewLoading} category={args.category || 'Administration'} categoryIcon={args.showIcon ? args.categoryIcon : undefined} navItemGroups={[
                {
                    title: 'General',
                    items: useMemo(() => mockNavLinks(['Configurations', 'Profile', 'Authentication', 'Connections']), [activeItem])
                },
                {
                    title: 'Second Group',
                    items: useMemo(() => mockNavLinks(['Option 1', 'Option 2']), [activeItem])
                },
                {
                    items: useMemo(() => mockNavLinks(['All configurations']), [activeItem])
                },
                {
                    items: useMemo(() => mockNavLinks(['Visually Grouped SubPage A', 'Visually Grouped SubPage B']), [activeItem])
                },
                {
                    items: [
                        {
                            text: 'Button Item'
                        }
                    ]
                }
            ]} pageTitle={activeItem} maxActions={args.maxActions} pageActions={[
                {
                    id: 'saveChanges',
                    text: 'Save'
                },
                {
                    id: 'cancelChanges',
                    text: 'Cancel'
                },
                {
                    id: 'goToRule',
                    text: 'Go to Rule'
                },
                {
                    id: 'viewInClipboard',
                    text: 'View in Clipboard'
                }
            ]} region={<StyledStoryPage secondary>
              <StyledRegion style={{ minHeight: '150vh' }}/>
            </StyledStoryPage>}/>} appHeader/>);
};
CategorySubPageDemo.args = {
    category: 'Administration',
    categoryIcon: 'gear-solid',
    showIcon: true,
    viewLoading: false,
    maxActions: 3
};
CategorySubPageDemo.argTypes = {
    category: { control: { type: 'text' } },
    categoryIcon: { options: [...icons], control: { type: 'select', icons: true } },
    showIcon: { control: { type: 'boolean' } },
    viewLoading: { control: { type: 'boolean' } },
    maxActions: { control: { type: 'number' } }
};
export const TabbedPageDemo = (args) => {
    const actions = args.showActions && (<>
      <Button>Page action 1</Button>
      <Button>Page action 2</Button>
    </>);
    const banners = args.showBanners && (<Banner variant='warning' messages={['This is a warning banner. You have been warned!']}/>);
    const genAICoachProps = useGenAICoach({ enableGenAICoach: args.showUtilities });
    const pageTemplateProps = {
        scrollContent: args.scrollContent,
        title: args.title || 'Tabbed page',
        icon: args.showIcon ? args.icon : undefined,
        actions,
        banners,
        path: getPath(args.showBreadcrumbs, args.pathData),
        utilities: args.showUtilities && genAICoachProps && (<UtilitiesLayout genAICoachProps={genAICoachProps}/>)
    };
    const tableData = commitsData;
    const columns = [
        { renderer: data => <Text>{data.id}</Text>, label: 'ID' },
        { renderer: data => <Text>{data.author}</Text>, label: 'Author' },
        { renderer: data => <Text>{data.date}</Text>, label: 'Date' },
        { renderer: data => <Text>{data.message}</Text>, label: 'Message' }
    ];
    return (<AppShellDemo main={<TabbedPage {...pageTemplateProps} tabs={{
                tabs: [
                    {
                        id: 'table',
                        name: 'Audit',
                        content: (<StyledDemoTableWrapper>
                    <Table title='Commit History' hoverHighlight={false} data={tableData} columns={columns}/>
                  </StyledDemoTableWrapper>)
                    },
                    {
                        id: 'team',
                        name: 'My Team',
                        content: (<>
                    <TasksDemo />
                    <MockSummaryList name='My team' limit={10} actions={null}/>
                  </>)
                    },
                    {
                        id: 'chat',
                        name: 'Chat',
                        content: <FeedDemo />
                    }
                ],
                type: 'horizontal',
                defaultTabId: 'chat'
            }}/>} appHeader/>);
};
TabbedPageDemo.args = {
    scrollContent: false,
    title: 'Tabbed page',
    icon: 'home-solid',
    showIcon: true,
    showBreadcrumbs: true,
    pathData: 'Page 1,Page2,Page 3,Page 4,Page 5',
    showActions: true,
    showBanners: false,
    showUtilities: true
};
TabbedPageDemo.argTypes = {
    scrollContent: { control: { type: 'boolean' } },
    title: { control: { type: 'text' } },
    icon: { options: [...icons], control: { type: 'select', icons: true } },
    showIcon: { control: { type: 'boolean' } },
    showBreadcrumbs: { control: { type: 'boolean' } },
    pathData: { control: { type: 'text' } },
    showActions: { control: { type: 'boolean' } },
    showBanners: { control: { type: 'boolean' } },
    showUtilities: { control: { type: 'boolean' } }
};
export const DynamicLayoutPageDemo = (args) => {
    const actions = args.showActions && (<>
      <Button>Page action 1</Button>
      <Button>Page action 2</Button>
    </>);
    const banners = args.showBanners && (<Banner variant='warning' messages={['Here be dragons!']}/>);
    const genAICoachProps = useGenAICoach({ enableGenAICoach: args.showUtilities });
    const pageTemplateProps = {
        title: args.title || 'Dynamic page',
        icon: args.showIcon ? args.icon : undefined,
        actions,
        banners,
        path: getPath(args.showBreadcrumbs, args.pathData),
        utilities: args.showUtilities && genAICoachProps && (<UtilitiesLayout genAICoachProps={genAICoachProps}/>)
    };
    const children = deriveGridChildren(getDefaultGridConfig().items);
    const layoutModel = getDefaultGridConfig().layout;
    const pageContent = (<StyledGridViewerWrapper>
      <GridLayoutViewer {...gridBreakpointSetup} layoutModel={layoutModel} autoSizeItemIDs={['feed-1']}>
        {children}
      </GridLayoutViewer>
    </StyledGridViewerWrapper>);
    const page = <DynamicLayoutPage a={pageContent} {...pageTemplateProps}/>;
    return <AppShellDemo main={page} appHeader/>;
};
DynamicLayoutPageDemo.args = {
    title: 'Demo page',
    icon: 'box-grid',
    showIcon: true,
    showBreadcrumbs: true,
    pathData: 'Page 1: Maximus gravida augue nec fermentum,Page2: Lorem ipsum dolor sit amet,Page 3: Phasellus commodo, diam ut rhoncus auctor,Page 4: In tincidunt ex eu mi tincidunt, a lobortis nunc tempor,Page 5: In tincidunt ex eu mi tincidunt',
    showActions: true,
    showBanners: false,
    showUtilities: true
};
DynamicLayoutPageDemo.argTypes = {
    title: { control: { type: 'text' } },
    icon: { options: [...icons], control: { type: 'select', icons: true } },
    showIcon: { control: { type: 'boolean' } },
    showBreadcrumbs: { control: { type: 'boolean' } },
    pathData: { control: { type: 'text' } },
    showActions: { control: { type: 'boolean' } },
    showBanners: { control: { type: 'boolean' } },
    showUtilities: { control: { type: 'boolean' } }
};
//# sourceMappingURL=PageTemplates.stories.jsx.map