import { useRef, useState } from 'react';
import { action } from '@storybook/addon-actions';
import { Button, Modal, useModalManager } from '@pega/cosmos-react-core';
import { AlertModalMockModal, AutoWidthModalContentMockModal, DockedModalMockModal, MinimizableModalModal, ModalDemoMockModal, ModalUpdatesMockModal, ProgressStateMockModal, getContent } from './Modal.mocks';
export default {
    title: 'Core/Modal',
    component: Modal,
    parameters: {
        layout: 'centered'
    },
    args: {
        autoWidth: false,
        stretch: false,
        center: false,
        onDismiss: action('Clicked dismiss button'),
        onMinimize: action('Clicked minimize button'),
        onActivate: action('Activates minimized modal'),
        onRequestDismiss: action('onRequestDismiss called'),
        onRequestMinimize: action('onRequestMinimize called'),
        onRequestActivate: action('onRequestActivate called'),
        onRequestDock: action('onRequestActivate called')
    },
    argTypes: {
        autoWidth: { control: { type: 'boolean' } },
        stretch: { control: { type: 'boolean' } },
        center: { control: { type: 'boolean' } },
        onDismiss: { table: { disable: true } },
        onMinimize: { table: { disable: true } },
        onActivate: { table: { disable: true } },
        onRequestDismiss: { table: { disable: true } },
        onRequestMinimize: { table: { disable: true } },
        onRequestActivate: { table: { disable: true } },
        onRequestDock: { table: { disable: true } }
    }
};
export const ModalDemo = (args) => {
    const { create } = useModalManager();
    return (<Button onClick={() => {
            create(ModalDemoMockModal, {
                ...args,
                autoWidth: args.autoWidth,
                stretch: args.stretch,
                center: args.center
            });
        }}>
      Open Modal
    </Button>);
};
export const ModalUpdates = (args) => {
    const { create } = useModalManager();
    const modalMethods = useRef();
    return (<Button onClick={() => {
            modalMethods.current = create(ModalUpdatesMockModal, {
                ...args,
                autoWidth: args.autoWidth,
                stretch: args.stretch,
                center: args.center,
                heading: 'This is the Modal heading',
                content: 'This Modal will automatically update in a few seconds.',
                disableButton: true
            });
            setTimeout(() => {
                modalMethods.current?.update({
                    heading: 'This is the updated Modal heading',
                    content: 'This Modal has been updated from its parent!',
                    disableButton: false
                });
            }, 2000);
        }}>
      Open Modal
    </Button>);
};
export const AlertModal = (args) => {
    const { create } = useModalManager();
    return (<Button onClick={() => {
            create(AlertModalMockModal, { ...args, autoWidth: args.autoWidth, stretch: args.stretch, center: args.center }, {
                onDismiss: args.onDismiss
            });
        }}>
      Open Modal
    </Button>);
};
AlertModal.args = {
    onKeyDown: action("Called input's onKeyDown")
};
AlertModal.argTypes = {
    onKeyDown: { table: { disable: true } }
};
export const ProgressState = () => {
    const { create } = useModalManager();
    return (<Button onClick={() => {
            create(ProgressStateMockModal);
        }}>
      Open Modal
    </Button>);
};
ProgressState.argTypes = {
    autoWidth: { table: { disable: true } },
    stretch: { table: { disable: true } },
    center: { table: { disable: true } }
};
export const MinimizableModal = (args) => {
    const { create } = useModalManager();
    const [count, setCount] = useState(1);
    return (<Button onClick={() => {
            setCount(cnt => cnt + 1);
            create(MinimizableModalModal, { ...args, autoWidth: args.autoWidth, stretch: args.stretch, center: args.center, count }, {
                id: `${count}`,
                minimizable: true,
                onDismiss: args.onDismiss,
                onMinimize: args.onMinimize,
                onActivate: args.onActivate,
                defaultMinimized: args.defaultMinimized
            });
        }}>
      Open Modal
    </Button>);
};
export const DockedModal = (args) => {
    const { create } = useModalManager();
    const [count, setCount] = useState(1);
    return (<Button onClick={() => {
            setCount(cnt => cnt + 1);
            create(DockedModalMockModal, args, {
                id: `${count}`,
                minimizable: true,
                maximizable: true,
                dockable: true
            });
        }}>
      Open Modal
    </Button>);
};
DockedModal.argTypes = {
    autoWidth: { table: { disable: true } },
    stretch: { table: { disable: true } },
    center: { table: { disable: true } }
};
export const AutoWidthModalContent = (args) => {
    const { create } = useModalManager();
    return (<Button onClick={() => {
            create(AutoWidthModalContentMockModal, {
                ...args,
                autoWidth: args.autoWidth,
                contentType: args.content,
                content: getContent(args.content, args.formColumnWidthFixed)
            });
        }}>
      Open Modal
    </Button>);
};
AutoWidthModalContent.args = {
    autoWidth: true,
    content: 'short text',
    formColumnWidthFixed: false
};
AutoWidthModalContent.argTypes = {
    stretch: { table: { disable: true } },
    center: { table: { disable: true } },
    content: {
        options: [
            'short text',
            'long text',
            'image',
            'table',
            'form (1 column)',
            'form (2 column)',
            'form (3 column)',
            'random'
        ],
        control: { type: 'select' }
    },
    formColumnWidthFixed: { control: { type: 'boolean' } }
};
//# sourceMappingURL=Modal.stories.jsx.map