import { useEffect, useReducer, useRef, useState } from 'react';
import { AIButton, Banner, Button, Checkbox, CheckboxGroup, ThemeOverride, ErrorState, Flex, Form, Grid, Input, Modal, RadioButton, RadioButtonGroup, Select, Option, TextArea, useModalContext, useModalManager, useToaster } from '@pega/cosmos-react-core';
import { loadingTimeoutMS } from '../Progress/Progress.mocks';
import { AIValues, fieldReducer, initFields } from './AIButton.mocks';
export default {
    title: 'Core/AIButton',
    component: AIButton,
    excludeStories: ['ConfigurableAIButton'],
    parameters: {
        layout: 'centered'
    }
};
export const AIButtonDemo = (args) => {
    return args.iconOnly ? (<AIButton icon={args.icon} label={args.label} disabled={args.disabled} iconOnly variant={args.variant}/>) : (<AIButton icon={args.icon} label={args.label} disabled={args.disabled} variant={args.variant}/>);
};
AIButtonDemo.args = {
    label: 'Fill form with AI',
    disabled: false,
    icon: 'polaris-solid',
    iconOnly: false,
    variant: 'secondary'
};
AIButtonDemo.argTypes = {
    variant: {
        options: ['primary', 'secondary'],
        control: { type: 'select' }
    },
    label: { control: { type: 'text' } },
    disabled: { control: { type: 'boolean' } },
    iconOnly: { control: { type: 'boolean' } },
    icon: {
        options: ['polaris-solid', 'check', undefined, false],
        control: { type: 'select' }
    }
};
export const AIButtonFormDemo = (args) => {
    const [fields, setField] = useReducer(fieldReducer, undefined, initFields);
    const [banner, setBanner] = useState();
    const [loadingMessage, setLoadingMessage] = useState('');
    const [submitting, setSubmitting] = useState(false);
    const bannerHandleRef = useRef(null);
    const { push } = useToaster();
    const name = fields.find(field => field.name === 'name');
    const email = fields.find(field => field.name === 'email');
    const locations = fields.find(field => field.name === 'locations');
    const meetings = fields.find(field => field.name === 'meetings');
    const meals = fields.find(field => field.name === 'meals');
    const notes = fields.find(field => field.name === 'notes');
    useEffect(() => {
        if (banner && bannerHandleRef.current)
            bannerHandleRef.current.focus();
    }, [banner]);
    if (!name || !email || !locations || !meetings || !meals || !notes)
        return <ErrorState />;
    const clearForm = () => {
        fields.forEach(field => setField({ type: 'cancel', name: field.name, value: undefined }));
    };
    const fillWithAI = () => {
        setLoadingMessage('AI is filling out the form...');
        setTimeout(() => {
            setLoadingMessage('');
            if (args.throwAIError) {
                setBanner(<Banner variant='urgent' messages={['An error occurred while generating responses from the AI.']} onDismiss={() => {
                        setBanner(undefined);
                    }} handle={bannerHandleRef}/>);
            }
            else {
                setBanner(undefined);
                const values = AIValues[Math.floor(Math.random() * AIValues.length)];
                Object.keys(values).forEach(field => {
                    setField({ type: 'ai', name: field, value: values[field] });
                });
            }
        }, loadingTimeoutMS);
    };
    const trySubmit = () => {
        const errors = [];
        fields.forEach(field => {
            setField({ type: 'submit', name: field.name, value: field.value });
            const error = field.validator?.() || '';
            if (error)
                errors.push(error);
        });
        if (errors.length === 0) {
            setSubmitting(true);
            setLoadingMessage('Submitting form...');
            setTimeout(() => {
                setLoadingMessage('');
                setSubmitting(false);
                push({ content: 'Form submitted!' });
                clearForm();
                setBanner(undefined);
                args.onSubmit?.();
            }, loadingTimeoutMS);
        }
        else {
            setBanner(<Banner variant='urgent' messages={errors} onDismiss={() => {
                    setBanner(undefined);
                }} handle={bannerHandleRef}/>);
        }
    };
    return (<Form heading={args.showTitle ? 'AI Form' : undefined} description={args.showDescription ? 'The AI in this demo is a mock and not a functional AI.' : undefined} progress={loadingMessage} actions={<>
          <Button onClick={() => {
                clearForm();
                args.onCancel?.();
            }} disabled={submitting}>
            Cancel
          </Button>
          <Flex container={{ alignItems: 'center' }}>
            <AIButton label='Fill form with AI' onClick={fillWithAI} disabled={!!loadingMessage}/>
            <Button variant='primary' disabled={!!loadingMessage} onClick={trySubmit}>
              Submit
            </Button>
          </Flex>
        </>} banners={banner}>
      <Grid container={{ gap: 1, cols: 'repeat(2, minmax(0, 1fr))' }}>
        <Input name={name.name} label={name.label} required={name.required} info={name.info || name.help} value={name.value} status={name.status} onChange={(e) => setField({ type: 'change', name: e.target.name, value: e.target.value })} onBlur={(e) => setField({ type: 'blur', name: e.target.name, value: e.target.value })}/>

        <Input name={email.name} label={email.label} required={email.required} info={email.info || email.help} value={email.value} status={email.status} type='email' onChange={(e) => setField({ type: 'change', name: e.target.name, value: e.target.value })} onBlur={(e) => setField({ type: 'blur', name: e.target.name, value: e.target.value })}/>

        <Grid item={{ colStartEnd: '1/-1' }}>
          <CheckboxGroup name={locations.name} label={locations.label} required={locations.required} info={locations.info || locations.help} status={locations.status}>
            {['Cambridge', 'Waltham', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (<Checkbox key={office} label={office} value={office} checked={locations.value?.includes(office)} onChange={(e) => setField({
                type: 'change',
                name: e.target.name,
                value: e.target.value
            })}/>))}
          </CheckboxGroup>
        </Grid>

        <Grid item={{ colStartEnd: '1/-1' }}>
          <RadioButtonGroup name={meetings.name} label={meetings.label} required={meetings.required} info={meetings.info || meetings.help} status={meetings.status}>
            {['Yes', 'No'].map(option => (<RadioButton key={option} label={option} value={option} checked={meetings.value === option} onChange={(e) => setField({ type: 'change', name: e.target.name, value: e.target.value })}/>))}
          </RadioButtonGroup>
        </Grid>

        <Select name={meals.name} label={meals.label} required={meals.required} info={meals.info || meals.help} value={meals.value || 'choose meal...'} status={meals.status} onChange={(e) => setField({ type: 'change', name: e.target.name, value: e.target.value })}>
          <Option>choose meal...</Option>
          <Option>Pizza</Option>
          <Option>Sandwich</Option>
          <Option>Salad</Option>
        </Select>

        <Grid item={{ colStartEnd: '1/-1' }}>
          <TextArea name={notes.name} label={notes.label} required={notes.required} info={notes.info || notes.help} value={notes.value} status={notes.status} maxLength={200} displayCharCount onChange={(e) => setField({ type: 'change', name: e.target.name, value: e.target.value })} onBlur={(e) => setField({ type: 'blur', name: e.target.name, value: e.target.value })}/>
        </Grid>
      </Grid>
    </Form>);
};
AIButtonFormDemo.args = {
    throwAIError: false,
    showTitle: true,
    showDescription: true
};
AIButtonFormDemo.argTypes = {
    throwAIError: { control: { type: 'boolean' } },
    showTitle: { control: { type: 'boolean' }, table: { disable: true } },
    showDescription: { control: { type: 'boolean' } }
};
export const AIButtonFormInModalDemo = (args) => {
    const AIModal = () => {
        const [fields, setField] = useReducer(fieldReducer, undefined, initFields);
        const [banner, setBanner] = useState();
        const [loadingMessage, setLoadingMessage] = useState('');
        const [submitting, setSubmitting] = useState(false);
        const bannerHandleRef = useRef(null);
        const { push } = useToaster();
        const { dismiss } = useModalContext();
        const name = fields.find(field => field.name === 'name');
        const email = fields.find(field => field.name === 'email');
        const locations = fields.find(field => field.name === 'locations');
        const meetings = fields.find(field => field.name === 'meetings');
        const meals = fields.find(field => field.name === 'meals');
        const notes = fields.find(field => field.name === 'notes');
        useEffect(() => {
            if (banner && bannerHandleRef.current)
                bannerHandleRef.current.focus();
        }, [banner]);
        if (!name || !email || !locations || !meetings || !meals || !notes)
            return <ErrorState />;
        const fillWithAI = () => {
            setLoadingMessage('AI is filling out the form...');
            setTimeout(() => {
                setLoadingMessage('');
                if (args.throwAIError) {
                    setBanner(<Banner variant='urgent' messages={['An error occurred while generating responses from the AI.']} onDismiss={() => {
                            setBanner(undefined);
                        }} handle={bannerHandleRef}/>);
                }
                else {
                    setBanner(undefined);
                    const values = AIValues[Math.floor(Math.random() * AIValues.length)];
                    Object.keys(values).forEach(field => {
                        setField({ type: 'ai', name: field, value: values[field] });
                    });
                }
                setLoadingMessage('');
            }, loadingTimeoutMS);
        };
        const trySubmit = () => {
            const errors = [];
            fields.forEach(field => {
                setField({ type: 'submit', name: field.name, value: field.value });
                const error = field.validator?.() || '';
                if (error)
                    errors.push(error);
            });
            if (errors.length === 0) {
                setSubmitting(true);
                setLoadingMessage('Submitting form...');
                setTimeout(() => {
                    setLoadingMessage('');
                    setSubmitting(false);
                    push({ content: 'Form submitted!' });
                    setBanner(undefined);
                    dismiss();
                }, loadingTimeoutMS);
            }
            else {
                setBanner(<Banner variant='urgent' messages={errors} onDismiss={() => {
                        setBanner(undefined);
                    }} handle={bannerHandleRef}/>);
            }
        };
        return (<Modal heading='AI Form in a Modal' progress={loadingMessage ? { message: loadingMessage } : undefined} onRequestDismiss={() => !submitting} actions={<>
            <Button onClick={dismiss} disabled={submitting}>
              Cancel
            </Button>
            <Flex container={{ alignItems: 'center' }}>
              <AIButton label='Fill form with AI' onClick={fillWithAI} disabled={!!loadingMessage}/>
              <Button variant='primary' disabled={!!loadingMessage} onClick={trySubmit}>
                Submit
              </Button>
            </Flex>
          </>}>
        <Form description='The AI in this demo is a mock and not a functional AI.' banners={banner} style={{ margin: 'auto', maxWidth: '37.5rem' }}>
          <Grid container={{ gap: 1, cols: 'repeat(2, minmax(0, 1fr))' }}>
            <Input name={name.name} label={name.label} required={name.required} info={name.info || name.help} value={name.value} status={name.status} onChange={(e) => setField({ type: 'change', name: e.target.name, value: e.target.value })} onBlur={(e) => setField({ type: 'blur', name: e.target.name, value: e.target.value })}/>

            <Input name={email.name} label={email.label} required={email.required} info={email.info || email.help} value={email.value} status={email.status} type='email' onChange={(e) => setField({ type: 'change', name: e.target.name, value: e.target.value })} onBlur={(e) => setField({ type: 'blur', name: e.target.name, value: e.target.value })}/>

            <Grid item={{ colStartEnd: '1/-1' }}>
              <CheckboxGroup name={locations.name} label={locations.label} required={locations.required} info={locations.info || locations.help} status={locations.status}>
                {['Cambridge', 'Waltham', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (<Checkbox key={office} label={office} value={office} checked={locations.value?.includes(office)} onChange={(e) => setField({
                    type: 'change',
                    name: e.target.name,
                    value: e.target.value
                })}/>))}
              </CheckboxGroup>
            </Grid>

            <Grid item={{ colStartEnd: '1/-1' }}>
              <RadioButtonGroup name={meetings.name} label={meetings.label} required={meetings.required} info={meetings.info || meetings.help} status={meetings.status}>
                {['Yes', 'No'].map(option => (<RadioButton key={option} label={option} value={option} checked={meetings.value === option} onChange={(e) => setField({ type: 'change', name: e.target.name, value: e.target.value })}/>))}
              </RadioButtonGroup>
            </Grid>

            <Select name={meals.name} label={meals.label} required={meals.required} info={meals.info || meals.help} value={meals.value || 'choose meal...'} status={meals.status} onChange={(e) => setField({ type: 'change', name: e.target.name, value: e.target.value })}>
              <Option>choose meal...</Option>
              <Option>Pizza</Option>
              <Option>Sandwich</Option>
              <Option>Salad</Option>
            </Select>

            <Grid item={{ colStartEnd: '1/-1' }}>
              <TextArea name={notes.name} label={notes.label} required={notes.required} info={notes.info || notes.help} value={notes.value} status={notes.status} maxLength={200} displayCharCount onChange={(e) => setField({ type: 'change', name: e.target.name, value: e.target.value })} onBlur={(e) => setField({ type: 'blur', name: e.target.name, value: e.target.value })}/>
            </Grid>
          </Grid>
        </Form>
      </Modal>);
    };
    const ModalButton = () => {
        const { create } = useModalManager();
        return (<Button onClick={() => {
                create(AIModal);
            }}>
        Open Modal
      </Button>);
    };
    return <ModalButton />;
};
AIButtonFormInModalDemo.args = {
    throwAIError: false
};
AIButtonFormInModalDemo.argTypes = {
    throwAIError: { control: { type: 'boolean' } }
};
export const ConfigurableAIButton = (args) => {
    return (<ThemeOverride theme={{
            base: {
                palette: {
                    ai: args.color
                }
            },
            components: {
                button: {
                    'border-width': args.borderWidth,
                    'border-radius': args.borderRadius,
                    padding: args.padding
                }
            }
        }}>
      <AIButton label='Configurable Button'/>
    </ThemeOverride>);
};
ConfigurableAIButton.args = {
    borderWidth: '0.0625rem',
    borderRadius: 9999,
    color: '#681fc3',
    padding: '0rem 1rem'
};
ConfigurableAIButton.argTypes = {
    borderWidth: { control: { type: 'text' } },
    borderRadius: { control: { type: 'number' } },
    color: { control: { type: 'color' } },
    padding: { control: { type: 'text' } }
};
//# sourceMappingURL=AIButton.stories.jsx.map