import { useState, useEffect } from 'react';
import { Button, Flex, Input, Modal, Text, cap, useModalContext, useModalManager, useToaster } from '@pega/cosmos-react-core';
import { ImageDemo } from '../Image/Image.stories';
import { TableDemo } from '../Table/Table.stories';
import { FormContent } from '../Form/Form.mocks';
import { loadingTimeoutMS } from '../Progress/Progress.mocks';
const getRandomContentType = (contentType) => {
    const contentMap = {
        text: ['short text', 'long text'],
        meta: ['image', 'table'],
        form: ['form (1 column)', 'form (2 column)', 'form (3 column)']
    };
    const options = contentMap[contentType];
    return options[Math.floor(Math.random() * options.length)];
};
export const getContent = (contentType, formColumnWidthFixed) => {
    switch (contentType) {
        case 'random':
            return (<Flex container={{ direction: 'column', gap: 4 }}>
          {getContent(getRandomContentType('text'), false)}
          {getContent(getRandomContentType('meta'), false)}
          {getContent(getRandomContentType('form'), formColumnWidthFixed)}
        </Flex>);
        case 'image':
            return <ImageDemo />;
        case 'table':
            return <TableDemo />;
        case 'form (1 column)':
            return <FormContent cols={1} showActions={false}/>;
        case 'form (2 column)':
            return <FormContent cols={2} showActions={false}/>;
        case 'form (3 column)':
            return <FormContent cols={3} showActions={false}/>;
        case 'long text':
            return (<Text>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum ipsum ipsum, nec
          sodales risus finibus eget. Proin ornare, ante ac convallis sollicitudin, elit turpis
          venenatis lorem, vitae viverra eros magna non lectus. Duis ac auctor sapien. Donec
          malesuada eros ut libero sodales, malesuada ullamcorper lacus eleifend.
        </Text>);
        case 'short text':
        default:
            return <Text>Lorem ipsum dolor sit amet.</Text>;
    }
};
export const ModalDemoMockModal = (args) => {
    return (<Modal heading='This is the Modal heading' autoWidth={args.autoWidth} center={args.center} stretch={args.stretch}>
      <Text>This is the content of the Modal.</Text>
    </Modal>);
};
export const ModalUpdatesMockModal = (props) => {
    const { update } = useModalContext();
    const actions = (<Button variant='primary' disabled={props.disableButton} onClick={() => {
            update({
                content: 'This Modal has been updated a second time from within the Modal!'
            });
        }}>
      Update Modal
    </Button>);
    return (<Modal {...props} heading={props.heading} actions={actions} autoWidth={props.autoWidth} center={props.center} stretch={props.stretch}>
      <Text>{props.content}</Text>
    </Modal>);
};
const AlertModalMockAlert = (props) => {
    const { dismiss } = useModalContext();
    return (<Modal heading='You have unsaved changes!' actions={<>
          <Button onClick={dismiss}>No</Button>
          <Button variant='primary' onClick={() => {
                dismiss();
                props.closeInitialModal();
            }}>
            Yes
          </Button>
        </>}>
      <Text>Are you sure you want to close without saving?</Text>
    </Modal>);
};
export const AlertModalMockModal = (args) => {
    const [name, setName] = useState('');
    const { create } = useModalManager();
    const { dismiss } = useModalContext();
    const actions = (<>
      <Button onClick={() => {
            if (name !== '') {
                create(AlertModalMockAlert, { closeInitialModal: dismiss }, { alert: true });
            }
            else {
                dismiss();
            }
        }}>
        Close
      </Button>
      <Button variant='primary' onClick={dismiss} disabled={name === ''}>
        Save
      </Button>
    </>);
    return (<Modal actions={actions} heading='Close the Modal without saving any data to invoke the alert' autoWidth={args.autoWidth} center={args.center} stretch={args.stretch} onRequestDismiss={() => {
            if (name !== '') {
                create(AlertModalMockAlert, { closeInitialModal: dismiss }, { alert: true });
                return false;
            }
        }}>
      <Input label='Name' name='name' onChange={(e) => {
            setName(e.target.value);
        }} onKeyDown={args.onKeyDown} value={name} required/>
    </Modal>);
};
export const ProgressStateMockModal = () => {
    const { dismiss } = useModalContext();
    const [transientState, setTransientState] = useState('loading');
    const actions = transientState === 'loading' ? null : (<>
        <Button disabled={!!transientState} onClick={() => {
            if (transientState !== 'submitting') {
                dismiss();
            }
        }}>
          Cancel
        </Button>
        <Button disabled={!!transientState} variant='primary' onClick={() => {
            setTransientState('submitting');
        }}>
          Submit
        </Button>
      </>);
    useEffect(() => {
        let timerID;
        if (transientState === 'loading' || transientState === 'submitting') {
            timerID = window.setTimeout(() => {
                if (transientState === 'loading') {
                    setTransientState(null);
                }
                else {
                    dismiss();
                }
            }, loadingTimeoutMS);
        }
        return () => {
            window.clearTimeout(timerID);
        };
    }, [transientState]);
    return (<Modal progress={(() => {
            if (transientState) {
                return {
                    message: `${cap(transientState)}…`
                };
            }
        })()} heading='Modal progress demo' actions={actions} onRequestDismiss={() => transientState !== 'submitting'}>
      {transientState !== 'loading' && (<Flex container={{ direction: 'column', gap: 2 }}>
          {Array.from({ length: 5 }, (_, i) => (<Input key={i} label={`Field-${i + 1}`}/>))}
        </Flex>)}
    </Modal>);
};
const MinimizableModalMockChildModal = (args) => {
    return (<Modal heading={`Modal #${args.count}`} autoWidth={args.autoWidth} onRequestDismiss={() => {
            args.onRequestDismiss?.();
        }}>
      <Text>
        This minimizable modal is triggered from an existing open modal - Modal #{args.parentId}.
      </Text>
    </Modal>);
};
export const MinimizableModalModal = (args) => {
    const { create } = useModalManager();
    return (<Modal heading={`Modal #${args.count}`} autoWidth={args.autoWidth} actions={<Button variant='secondary' onClick={() => {
                create(MinimizableModalMockChildModal, { ...args, count: args.count + 0.1, parentId: args.count }, {
                    id: `${args.count + 0.1}`,
                    minimizable: true,
                    onDismiss: args.onDismiss,
                    onMinimize: args.onMinimize,
                    onActivate: args.onActivate
                });
            }}>
          Create modal
        </Button>} center={args.center} stretch={args.stretch} onRequestDismiss={args.onRequestDismiss} onRequestMinimize={args.onRequestMinimize} onRequestActivate={args.onRequestActivate}>
      <Text>This Modal can be minimized by clicking the minimize button above.</Text>
    </Modal>);
};
export const DockedModalMockModal = (args) => {
    const { id } = useModalContext();
    return (<Modal heading={`Modal #${id}`} onRequestDock={args.onRequestDock}>
      <Text>This Modal can be minimized by clicking the minimize button above.</Text>
    </Modal>);
};
export const AutoWidthModalContentMockModal = (args) => {
    const { dismiss } = useModalContext();
    const { push } = useToaster();
    return (<Modal heading={`Modal ${args.autoWidth ? 'with' : 'without'} autoWidth`} autoWidth={args.autoWidth} actions={args.contentType.includes('form') || args.contentType === 'random' ? (<>
            <Button name='Cancel' variant='secondary' onClick={() => {
                dismiss();
                push({ content: 'Form cancelled!' });
            }}>
              Cancel
            </Button>
            <Button name='Submit' variant='primary' onClick={() => {
                dismiss();
                push({ content: 'Form submitted!' });
            }}>
              Submit
            </Button>
          </>) : undefined}>
      {args.content}
    </Modal>);
};
//# sourceMappingURL=Modal.mocks.jsx.map