import { BannerPage } from '@pega/cosmos-react-wss';
import { UtilitiesLayout } from '@pega/cosmos-react-work';
import { FeedDemo } from '../../social/Feed/Feed.stories';
import { AppShellDemo } from '../AppShell/AppShell.stories';
import { QuickCreateDemo } from '../QuickCreate/QuickCreate.stories';
import useGenAIcoach from '../../work/GenAICoach/useGenAICoach';
export default {
    title: 'Web Self Service/Page Templates',
    parameters: {
        layout: 'fullscreen'
    }
};
export const BannerPageDemo = (args) => {
    const genAICoachProps = useGenAIcoach({ enableGenAICoach: args.showUtilities });
    return (<AppShellDemo mainContent={<BannerPage variant={args.variant ? args.variant : undefined} a={[<QuickCreateDemo />, <QuickCreateDemo showIcons/>]} b={!args.oneColumn ? [<FeedDemo />] : undefined} banner={{
                variant: args.bannerVariant,
                backgroundColor: args.backgroundColor,
                title: args.title,
                message: args.message,
                backgroundImage: args.backgroundImage,
                tintImage: args.tintImage
            }} utilities={args.showUtilities &&
                genAICoachProps && <UtilitiesLayout genAICoachProps={genAICoachProps}/>}/>} appName='Service Desk' imageSrc='https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg'/>);
};
BannerPageDemo.args = {
    title: 'Banner page demo',
    message: 'Welcome to the banner page demo, nice to see you. Did you get your haircut?',
    bannerVariant: 'light',
    backgroundColor: '#3eb489',
    backgroundImage: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/moraine-lake-and-the-valley-of-the-ten-peaks-in-the-royalty-free-image-1571062944.jpg',
    tintImage: true,
    oneColumn: false,
    showUtilities: true,
    variant: undefined
};
BannerPageDemo.argTypes = {
    title: { control: { type: 'text' } },
    message: { control: { type: 'text' } },
    bannerVariant: { options: ['light', 'dark'], control: { type: 'select' } },
    backgroundColor: { control: { type: 'color' } },
    backgroundImage: { control: { type: 'text' } },
    tintImage: { control: { type: 'boolean' } },
    oneColumn: { control: { type: 'boolean' } },
    showUtilities: { control: { type: 'boolean' } },
    variant: { options: ['two-column', 'narrow-wide', 'wide-narrow'], control: { type: 'select' } }
};
//# sourceMappingURL=PageTemplates.stories.jsx.map