import * as __WEBPACK_EXTERNAL_MODULE__chakra_ui_react__ from "@chakra-ui/react";
import * as __WEBPACK_EXTERNAL_MODULE__storybook_test__ from "@storybook/test";
import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
import * as __WEBPACK_EXTERNAL_MODULE__Modal_mjs__ from "./Modal.mjs";
import * as __WEBPACK_EXTERNAL_MODULE__Button_Button_mjs__ from "../Button/Button.mjs";
import * as __WEBPACK_EXTERNAL_MODULE__ConfirmModal_mjs__ from "./ConfirmModal.mjs";
import * as __WEBPACK_EXTERNAL_MODULE__components_Inputs_Select_Select_mjs__ from "../../components/Inputs/Select/Select.mjs";
import * as __WEBPACK_EXTERNAL_MODULE__components_Section_Section_mjs__ from "../../components/Section/Section.mjs";
import * as __WEBPACK_EXTERNAL_MODULE__ConfirmItemDeleteModal_mjs__ from "./ConfirmItemDeleteModal.mjs";
import * as __WEBPACK_EXTERNAL_MODULE__chakra_ui_icons__ from "@chakra-ui/icons";
const lorem = `
  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.
`;
const LoremIpsum = ({ iterations = 1, ...rest })=>{
    const texts = [];
    for(let i = 0; i < iterations; i++)texts.push(/*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Text, rest, lorem));
    return /*#__PURE__*/ React.createElement(React.Fragment, null, texts);
};
/* ESM default export */ const content_helper = LoremIpsum;
const meta = {
    title: 'Components/Modal',
    component: __WEBPACK_EXTERNAL_MODULE__Modal_mjs__["default"],
    parameters: {
        design: {
            type: 'figma',
            url: 'https://www.figma.com/file/bJcVrZNilxa06jYuVCGWYd/Redpanda-Design-System-2023?type=design&node-id=1-2874&mode=design'
        }
    }
};
/* ESM default export */ const Modal_stories_rslib_entry_ = meta;
const ButtonWithModal = ({ ...args })=>{
    const [isOpen, setIsOpen] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Button_Button_mjs__["default"], {
        onClick: ()=>setIsOpen(true)
    }, "Open Modal"), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Modal_mjs__["default"], {
        ...args,
        isOpen: isOpen,
        onClose: ()=>setIsOpen(false)
    }));
};
const Default = {
    args: {
        heading: 'Modal heading',
        isOpen: false,
        children: /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Stack, {
            spacing: 4
        }, /*#__PURE__*/ React.createElement(content_helper, null))
    },
    parameters: {
        design: {
            type: 'figma',
            url: 'https://www.figma.com/file/bJcVrZNilxa06jYuVCGWYd/Redpanda-Design-System-2023?type=design&node-id=36-2460&mode=design&t=cVtmR0UCPQ2Em08Q-4'
        }
    },
    render: (args)=>/*#__PURE__*/ React.createElement(ButtonWithModal, args),
    play: async ({ canvasElement, step })=>{
        const canvas = (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.within)(canvasElement);
        await step('Open modal', async ()=>{
            (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(canvas.getByText('Open Modal')).toBeVisible();
            __WEBPACK_EXTERNAL_MODULE__storybook_test__.fireEvent.click(canvas.getByText('Open Modal'));
        });
        await step('Check elements', async ()=>{
            await (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.waitFor)(()=>{
                // We need to use screen because Chakra spawns a Portal
                (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(__WEBPACK_EXTERNAL_MODULE__storybook_test__.screen.getByTestId('modal-heading')).toBeVisible();
                (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(__WEBPACK_EXTERNAL_MODULE__storybook_test__.screen.getByTestId('modal-heading')).toHaveTextContent('Modal heading');
                (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(__WEBPACK_EXTERNAL_MODULE__storybook_test__.screen.getByTestId('modal-body')).toBeVisible();
                (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(__WEBPACK_EXTERNAL_MODULE__storybook_test__.screen.getByTestId('modal-close-button')).toBeVisible();
            });
        });
        __WEBPACK_EXTERNAL_MODULE__storybook_test__.fireEvent.click(__WEBPACK_EXTERNAL_MODULE__storybook_test__.screen.getByTestId('modal-close-button'));
        await step('Check elements are hidden after closing', async ()=>{
            await (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.waitFor)(()=>{
                (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(__WEBPACK_EXTERNAL_MODULE__storybook_test__.screen.queryByTestId('modal-heading')).toBeInTheDocument();
                (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(__WEBPACK_EXTERNAL_MODULE__storybook_test__.screen.queryByTestId('modal-body')).toBeInTheDocument();
                (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(__WEBPACK_EXTERNAL_MODULE__storybook_test__.screen.queryByTestId('modal-close-button')).toBeInTheDocument();
                (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(__WEBPACK_EXTERNAL_MODULE__storybook_test__.screen.queryByTestId('modal-heading')).not.toBeVisible();
                (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(__WEBPACK_EXTERNAL_MODULE__storybook_test__.screen.queryByTestId('modal-body')).not.toBeVisible();
                (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(__WEBPACK_EXTERNAL_MODULE__storybook_test__.screen.queryByTestId('modal-close-button')).not.toBeVisible();
            });
        });
    }
};
const WithForm = ()=>{
    const [isOpen, setIsOpen] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
    const [isSubmitting, setIsSubmitting] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
    const handleSubmit = (e)=>{
        e.preventDefault();
        setIsSubmitting(true);
        setTimeout(()=>{
            setIsSubmitting(false);
            setIsOpen(false);
        }, 1000);
    };
    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Button_Button_mjs__["default"], {
        onClick: ()=>setIsOpen(true)
    }, "Open Modal"), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Modal_mjs__["default"], {
        heading: "Modal with form",
        isOpen: isOpen,
        onClose: ()=>setIsOpen(false)
    }, /*#__PURE__*/ React.createElement("form", {
        onSubmit: handleSubmit
    }, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Stack, {
        spacing: 4
    }, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Input, {
        name: "text",
        type: "text",
        placeholder: "Enter text"
    }), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__components_Inputs_Select_Select_mjs__["default"], {
        name: "dropdown",
        options: [
            {
                label: 'Option 1',
                value: '1'
            },
            {
                label: 'Option 2',
                value: '2'
            },
            {
                label: 'Option 3',
                value: '3'
            }
        ]
    }), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__components_Section_Section_mjs__["default"], {
        variant: "secondary"
    }, /*#__PURE__*/ React.createElement(content_helper, null)), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Button_Button_mjs__["default"], {
        width: "fit-content",
        type: "submit",
        isLoading: isSubmitting
    }, "Submit")))));
};
const WelcomeToRedpanda = {
    args: {
        heading: 'Welcome to Redpanda!',
        isOpen: false,
        size: 'xl',
        children: /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Stack, {
            spacing: 6
        }, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Text, null, "Thanks for signing up for the Serverless Beta. We have provisioned a Serverless cluster with everything you need to get started and create a proof-of-concept:"), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.UnorderedList, {
            style: {
                textIndent: 12
            }
        }, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Box, {
            ml: 8
        }, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.ListItem, null, "Data (demo topic with messages)"), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.ListItem, null, "CLI tooling and commands"), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.ListItem, null, "Example code"))), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.ButtonGroup, {
            alignSelf: "flex-end",
            pt: 12
        }, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Button_Button_mjs__["default"], {
            variant: "solid",
            colorScheme: "brand"
        }, "Go to Demo serverless instance")))
    },
    render: (args)=>/*#__PURE__*/ React.createElement(ButtonWithModal, args)
};
const DefaultConfirm = {
    render: ()=>{
        const [confirmed, setConfirmed] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
        return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__ConfirmModal_mjs__["default"], {
            trigger: "Confirm",
            heading: "Are you sure?",
            onConfirm: ()=>{
                console.log('yes, you confirmed!');
                setConfirmed(true);
            }
        }, "Are you sure you want to do this?"), ' ', confirmed && /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Text, {
            variant: 'sm',
            as: "span"
        }, "Confirmed!"));
    }
};
const DefaultConfirmWithCustomButton = {
    render: ()=>{
        const [confirmed, setConfirmed] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
        const [cancelled, setCancelled] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
        return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__ConfirmModal_mjs__["default"], {
            trigger: /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Button_Button_mjs__["default"], {
                variant: "outline"
            }, "Custom Button"),
            heading: "Are you sure?",
            onConfirm: ()=>{
                console.log('yes, you confirmed!');
                setConfirmed(true);
                setCancelled(false);
            },
            onClose: ()=>{
                console.log('modal cancelled...');
                setCancelled(true);
                setConfirmed(false);
            }
        }, "Are you sure you want to do this?"), ' ', /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Text, {
            variant: 'xl',
            as: "span",
            ml: "4"
        }, confirmed && 'Confirmed 😁', cancelled && 'Cancelled 😢'));
    }
};
const ConfirmWithDeleteVariant = {
    render: ()=>{
        const [confirmed, setConfirmed] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
        return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__ConfirmModal_mjs__["default"], {
            heading: "Hmm...",
            variant: "delete",
            trigger: /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Button_Button_mjs__["default"], {
                variant: "outline-delete",
                leftIcon: /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_icons__.DeleteIcon, null)
            }, "Delete"),
            primaryActionLabel: "Yuppers!",
            secondaryActionLabel: "Nah",
            onConfirm: ()=>{
                console.log('yes, you confirmed!');
                setConfirmed(true);
            }
        }, /*#__PURE__*/ React.createElement("p", null, "Are you sure, homie?")), confirmed && /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Text, {
            mt: "4"
        }, "Deleted!"));
    }
};
const SimpleConfirmWithVariants = {
    render: ()=>/*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.ButtonGroup, null, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__ConfirmModal_mjs__["default"], {
            variant: "success",
            trigger: /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Button_Button_mjs__["default"], null, "Good luck"),
            heading: "Success",
            onConfirm: ()=>{
                console.log('yes, you confirmed!');
            }
        }, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Text, null, "You're off to great places, today is your day.")), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__ConfirmModal_mjs__["default"], {
            variant: "error",
            trigger: "Good luck",
            heading: "Better luck next time",
            onConfirm: ()=>{
                console.log('yes, you confirmed!');
            }
        }, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Text, null, "You always pass failure on the way to success...")))
};
const ConfirmDeletingAnItem = {
    render: ()=>/*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.ButtonGroup, null, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__ConfirmItemDeleteModal_mjs__["default"], {
            itemType: "cluster",
            trigger: "Delete",
            onConfirm: (dismiss)=>{
                // 1. perform delete operation
                console.log('Simulating HTTP request...');
                setTimeout(()=>{
                    // 2. call dismiss() on success or onError() on error
                    console.log('calling dismiss...');
                    dismiss();
                }, 1000);
            }
        }), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__ConfirmItemDeleteModal_mjs__["default"], {
            itemType: "user",
            trigger: "Delete (with error)",
            onConfirm: (_, onError)=>{
                // 1. perform delete operation
                console.log('Simulating HTTP request...');
                setTimeout(()=>{
                    // 2. call dismiss() on success or onError() on error
                    console.log('error performing request...');
                    onError('Error deleting the user. Please try again.');
                }, 1000);
            },
            onClose: ()=>{
                console.log('modal closed... cancel everything!');
            }
        }))
};
const ConfirmDeletingAnItemWithCustomInputMatchText = {
    render: ()=>/*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.ButtonGroup, null, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__ConfirmItemDeleteModal_mjs__["default"], {
            itemType: "monday",
            trigger: "Delete",
            inputMatchText: "monday",
            onConfirm: (dismiss)=>{
                dismiss();
            }
        }))
};
const FormWithinModal = {
    render: ()=>{
        const [isCreating, setIsCreating] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
        return /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__ConfirmModal_mjs__["default"], {
            trigger: /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Button_Button_mjs__["default"], null, "Create something"),
            heading: "Create something",
            primaryActionLabel: "Create",
            autoCloseOnConfirm: false,
            onConfirm: (dismiss)=>{
                console.log('yes, you confirmed!');
                setIsCreating(true);
                setTimeout(()=>{
                    dismiss();
                }, 1000);
            }
        }, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Stack, {
            spacing: 4
        }, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Input, {
            name: "text",
            type: "text",
            placeholder: "Enter text"
        }), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__components_Inputs_Select_Select_mjs__["default"], {
            name: "dropdown",
            options: [
                {
                    label: 'Option 1',
                    value: '1'
                },
                {
                    label: 'Option 2',
                    value: '2'
                },
                {
                    label: 'Option 3',
                    value: '3'
                }
            ]
        }), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__components_Section_Section_mjs__["default"], {
            variant: "secondary"
        }, /*#__PURE__*/ React.createElement(content_helper, null)), isCreating && /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Box, null, /*#__PURE__*/ React.createElement("p", null, "Creating..."))));
    }
};
export { ConfirmDeletingAnItem, ConfirmDeletingAnItemWithCustomInputMatchText, ConfirmWithDeleteVariant, Default, DefaultConfirm, DefaultConfirmWithCustomButton, FormWithinModal, SimpleConfirmWithVariants, WelcomeToRedpanda, WithForm, Modal_stories_rslib_entry_ as default };
