import { useEffect, useState, useCallback, useReducer, useRef } from 'react';
import { Banner, Button, ThemeOverride, Flex, Form, Input } from '@pega/cosmos-react-core';
import { AppShellDemo } from '../AppShell/AppShell.stories';
import { loadingTimeoutMS } from '../Progress/Progress.mocks';
import { demoFields, fieldReducer, formActions } from './Banner.mocks';
export default {
    title: 'Core/Banner',
    component: Banner,
    excludeStories: ['ConfigurableErrorBanner']
};
export const BannerDemo = (args) => {
    const [show, setShow] = useState(true);
    const bannerHandleRef = useRef(null);
    const action = args.actions
        ? {
            text: `Individual ${args.variant} action.`,
            onClick: e => {
                e.preventDefault();
            },
            href: 'https://pega.com'
        }
        : undefined;
    const sliceMessages = (messages, count) => {
        const currentMessages = [];
        let currentCount = 0;
        messages.forEach(msg => {
            if (currentCount < count) {
                currentCount += 1;
                if (typeof msg === 'string') {
                    currentMessages.push(msg);
                }
                else if (!msg.items) {
                    currentMessages.push({ ...msg, action });
                }
                else {
                    const [items, subCount] = sliceMessages(msg.items, count - currentCount);
                    currentCount += subCount;
                    currentMessages.push({
                        ...msg,
                        action,
                        items: items.length > 0 ? items : undefined
                    });
                }
            }
        });
        return [currentMessages, currentCount];
    };
    const [messagesToRender] = sliceMessages([
        {
            label: `Individual ${args.variant} label.`,
            description: args.descriptions
                ? '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.'
                : undefined,
            items: [`Child ${args.variant} label.`]
        },
        {
            label: [
                `Individual ${args.variant} label, `,
                {
                    text: 'with a clickable link',
                    onClick: e => {
                        e.preventDefault();
                    },
                    href: 'https://pega.com'
                },
                ' within it.'
            ],
            description: args.descriptions ? `Individual ${args.variant} description.` : undefined
        },
        `Individual ${args.variant} label.`,
        {
            label: `Individual ${args.variant} label.`,
            description: args.descriptions
                ? '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.'
                : undefined
        },
        {
            label: `Grandparent ${args.variant} label.`,
            items: [
                {
                    label: `Parent ${args.variant} label.`,
                    items: [`Child ${args.variant} label.`]
                }
            ]
        }
    ], args.count ?? Infinity);
    return (<Flex container={{ direction: 'column', gap: 2 }}>
      {show ? (<Banner headingText={args.headingText || undefined} variant={args.variant} messages={messagesToRender} onDismiss={() => setShow(false)} handle={bannerHandleRef}/>) : (<Button onClick={() => setShow(true)}>Open banner</Button>)}
      {!args.disableFocusControl && (<Button onClick={() => bannerHandleRef.current?.focus()} style={{ maxWidth: 'fit-content' }}>
          Focus
        </Button>)}
    </Flex>);
};
BannerDemo.args = {
    headingText: '',
    variant: 'info',
    count: 8,
    descriptions: true,
    actions: true
};
BannerDemo.argTypes = {
    headingText: { control: { type: 'text' } },
    variant: { options: ['urgent', 'warning', 'success', 'info', 'ai'], control: { type: 'select' } },
    count: { control: { type: 'range', min: 1, max: 8 } },
    descriptions: { control: { type: 'boolean' } },
    actions: { control: { type: 'boolean' } }
};
export const ConfigurableErrorBanner = (args) => {
    return (<ThemeOverride theme={{
            components: {
                banner: {
                    urgent: {
                        background: args.background
                    }
                }
            }
        }}>
      <Banner variant='urgent' messages={['Your request failed to send!', 'Please review your request and try again']}/>
    </ThemeOverride>);
};
ConfigurableErrorBanner.args = {
    background: '#d91c29'
};
ConfigurableErrorBanner.argTypes = {
    background: { control: { type: 'color' } }
};
export const ShownInForm = () => {
    const [fields, setField] = useReducer(fieldReducer, demoFields);
    const [loading, setLoading] = useState(false);
    const [banner, setBanner] = useState(null);
    const bannerHandleRef = useRef(null);
    const onSubmit = useCallback((e) => {
        e.preventDefault();
        setLoading(true);
        setTimeout(() => {
            const errorFields = fields.filter(field => !field.validator(field.value));
            let variant = 'success';
            let messages = fields.map(f => `${f.name} was typed perfectly`);
            if (errorFields.length > 0) {
                variant = 'urgent';
                messages = errorFields.map(f => `${f.name} was not typed correctly`);
            }
            setLoading(false);
            setBanner(<Banner variant={variant} messages={messages} onDismiss={() => {
                    setBanner(false);
                }} handle={bannerHandleRef}/>);
        }, loadingTimeoutMS);
    }, []);
    useEffect(() => {
        if (banner && fields.some(field => !field.validator(field.value)) && bannerHandleRef.current)
            bannerHandleRef.current.focus();
    }, [banner]);
    return (<Form banners={banner} actions={formActions} onSubmit={onSubmit} progress={loading ? 'Submitting...' : undefined} style={{ margin: 'auto', padding: '2.5rem', maxWidth: '37.5rem' }}>
      {fields.map((field) => {
            return (<Input key={field.name} name={field.name} label={field.label} info={field.info} value={field.value} onChange={e => setField(e.target)}/>);
        })}
    </Form>);
};
export const ShownInAppShell = () => {
    const [hasBanner, setHasBanner] = useState(true);
    return (<AppShellDemo banners={hasBanner && (<Banner onDismiss={() => setHasBanner(false)} variant='success' messages={[
                'Uploaded pega_data.json successfully',
                'Uploaded business-earnings.xlsx successfully'
            ]}/>)}/>);
};
ShownInAppShell.parameters = {
    layout: 'fullscreen'
};
//# sourceMappingURL=Banner.stories.jsx.map