"use strict";
// The require scope
var __webpack_require__ = {};
/************************************************************************/ // webpack/runtime/compat_get_default_export
(()=>{
    // getDefaultExport function for compatibility with non-ESM modules
    __webpack_require__.n = function(module) {
        var getter = module && module.__esModule ? function() {
            return module['default'];
        } : function() {
            return module;
        };
        __webpack_require__.d(getter, {
            a: getter
        });
        return getter;
    };
})();
// webpack/runtime/define_property_getters
(()=>{
    __webpack_require__.d = function(exports1, definition) {
        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
            enumerable: true,
            get: definition[key]
        });
    };
})();
// webpack/runtime/has_own_property
(()=>{
    __webpack_require__.o = function(obj, prop) {
        return Object.prototype.hasOwnProperty.call(obj, prop);
    };
})();
// webpack/runtime/make_namespace_object
(()=>{
    // define __esModule on exports
    __webpack_require__.r = function(exports1) {
        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
            value: 'Module'
        });
        Object.defineProperty(exports1, '__esModule', {
            value: true
        });
    };
})();
/************************************************************************/ var __webpack_exports__ = {};
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// EXPORTS
__webpack_require__.d(__webpack_exports__, {
    ConfirmDeletingAnItem: ()=>/* binding */ ConfirmDeletingAnItem,
    DefaultConfirm: ()=>/* binding */ DefaultConfirm,
    SimpleConfirmWithVariants: ()=>/* binding */ SimpleConfirmWithVariants,
    WelcomeToRedpanda: ()=>/* binding */ WelcomeToRedpanda,
    default: ()=>/* binding */ Modal_stories_rslib_entry_,
    ConfirmDeletingAnItemWithCustomInputMatchText: ()=>/* binding */ ConfirmDeletingAnItemWithCustomInputMatchText,
    ConfirmWithDeleteVariant: ()=>/* binding */ ConfirmWithDeleteVariant,
    DefaultConfirmWithCustomButton: ()=>/* binding */ DefaultConfirmWithCustomButton,
    WithForm: ()=>/* binding */ WithForm,
    FormWithinModal: ()=>/* binding */ FormWithinModal,
    Default: ()=>/* binding */ Default
});
const react_namespaceObject = require("@chakra-ui/react");
const test_namespaceObject = require("@storybook/test");
const external_react_namespaceObject = require("react");
const external_Modal_js_namespaceObject = require("./Modal.js");
var external_Modal_js_default = /*#__PURE__*/ __webpack_require__.n(external_Modal_js_namespaceObject);
const Button_js_namespaceObject = require("../Button/Button.js");
var Button_js_default = /*#__PURE__*/ __webpack_require__.n(Button_js_namespaceObject);
const external_ConfirmModal_js_namespaceObject = require("./ConfirmModal.js");
var external_ConfirmModal_js_default = /*#__PURE__*/ __webpack_require__.n(external_ConfirmModal_js_namespaceObject);
const Select_js_namespaceObject = require("../../components/Inputs/Select/Select.js");
var Select_js_default = /*#__PURE__*/ __webpack_require__.n(Select_js_namespaceObject);
const Section_js_namespaceObject = require("../../components/Section/Section.js");
var Section_js_default = /*#__PURE__*/ __webpack_require__.n(Section_js_namespaceObject);
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(react_namespaceObject.Text, rest, lorem));
    return /*#__PURE__*/ React.createElement(React.Fragment, null, texts);
};
/* ESM default export */ const content_helper = LoremIpsum;
const external_ConfirmItemDeleteModal_js_namespaceObject = require("./ConfirmItemDeleteModal.js");
var external_ConfirmItemDeleteModal_js_default = /*#__PURE__*/ __webpack_require__.n(external_ConfirmItemDeleteModal_js_namespaceObject);
const icons_namespaceObject = require("@chakra-ui/icons");
const meta = {
    title: 'Components/Modal',
    component: external_Modal_js_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, external_react_namespaceObject.useState)(false);
    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Button_js_default(), {
        onClick: ()=>setIsOpen(true)
    }, "Open Modal"), /*#__PURE__*/ React.createElement(external_Modal_js_default(), {
        ...args,
        isOpen: isOpen,
        onClose: ()=>setIsOpen(false)
    }));
};
const Default = {
    args: {
        heading: 'Modal heading',
        isOpen: false,
        children: /*#__PURE__*/ React.createElement(react_namespaceObject.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, test_namespaceObject.within)(canvasElement);
        await step('Open modal', async ()=>{
            (0, test_namespaceObject.expect)(canvas.getByText('Open Modal')).toBeVisible();
            test_namespaceObject.fireEvent.click(canvas.getByText('Open Modal'));
        });
        await step('Check elements', async ()=>{
            await (0, test_namespaceObject.waitFor)(()=>{
                // We need to use screen because Chakra spawns a Portal
                (0, test_namespaceObject.expect)(test_namespaceObject.screen.getByTestId('modal-heading')).toBeVisible();
                (0, test_namespaceObject.expect)(test_namespaceObject.screen.getByTestId('modal-heading')).toHaveTextContent('Modal heading');
                (0, test_namespaceObject.expect)(test_namespaceObject.screen.getByTestId('modal-body')).toBeVisible();
                (0, test_namespaceObject.expect)(test_namespaceObject.screen.getByTestId('modal-close-button')).toBeVisible();
            });
        });
        test_namespaceObject.fireEvent.click(test_namespaceObject.screen.getByTestId('modal-close-button'));
        await step('Check elements are hidden after closing', async ()=>{
            await (0, test_namespaceObject.waitFor)(()=>{
                (0, test_namespaceObject.expect)(test_namespaceObject.screen.queryByTestId('modal-heading')).toBeInTheDocument();
                (0, test_namespaceObject.expect)(test_namespaceObject.screen.queryByTestId('modal-body')).toBeInTheDocument();
                (0, test_namespaceObject.expect)(test_namespaceObject.screen.queryByTestId('modal-close-button')).toBeInTheDocument();
                (0, test_namespaceObject.expect)(test_namespaceObject.screen.queryByTestId('modal-heading')).not.toBeVisible();
                (0, test_namespaceObject.expect)(test_namespaceObject.screen.queryByTestId('modal-body')).not.toBeVisible();
                (0, test_namespaceObject.expect)(test_namespaceObject.screen.queryByTestId('modal-close-button')).not.toBeVisible();
            });
        });
    }
};
const WithForm = ()=>{
    const [isOpen, setIsOpen] = (0, external_react_namespaceObject.useState)(false);
    const [isSubmitting, setIsSubmitting] = (0, external_react_namespaceObject.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(Button_js_default(), {
        onClick: ()=>setIsOpen(true)
    }, "Open Modal"), /*#__PURE__*/ React.createElement(external_Modal_js_default(), {
        heading: "Modal with form",
        isOpen: isOpen,
        onClose: ()=>setIsOpen(false)
    }, /*#__PURE__*/ React.createElement("form", {
        onSubmit: handleSubmit
    }, /*#__PURE__*/ React.createElement(react_namespaceObject.Stack, {
        spacing: 4
    }, /*#__PURE__*/ React.createElement(react_namespaceObject.Input, {
        name: "text",
        type: "text",
        placeholder: "Enter text"
    }), /*#__PURE__*/ React.createElement(Select_js_default(), {
        name: "dropdown",
        options: [
            {
                label: 'Option 1',
                value: '1'
            },
            {
                label: 'Option 2',
                value: '2'
            },
            {
                label: 'Option 3',
                value: '3'
            }
        ]
    }), /*#__PURE__*/ React.createElement(Section_js_default(), {
        variant: "secondary"
    }, /*#__PURE__*/ React.createElement(content_helper, null)), /*#__PURE__*/ React.createElement(Button_js_default(), {
        width: "fit-content",
        type: "submit",
        isLoading: isSubmitting
    }, "Submit")))));
};
const WelcomeToRedpanda = {
    args: {
        heading: 'Welcome to Redpanda!',
        isOpen: false,
        size: 'xl',
        children: /*#__PURE__*/ React.createElement(react_namespaceObject.Stack, {
            spacing: 6
        }, /*#__PURE__*/ React.createElement(react_namespaceObject.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(react_namespaceObject.UnorderedList, {
            style: {
                textIndent: 12
            }
        }, /*#__PURE__*/ React.createElement(react_namespaceObject.Box, {
            ml: 8
        }, /*#__PURE__*/ React.createElement(react_namespaceObject.ListItem, null, "Data (demo topic with messages)"), /*#__PURE__*/ React.createElement(react_namespaceObject.ListItem, null, "CLI tooling and commands"), /*#__PURE__*/ React.createElement(react_namespaceObject.ListItem, null, "Example code"))), /*#__PURE__*/ React.createElement(react_namespaceObject.ButtonGroup, {
            alignSelf: "flex-end",
            pt: 12
        }, /*#__PURE__*/ React.createElement(Button_js_default(), {
            variant: "solid",
            colorScheme: "brand"
        }, "Go to Demo serverless instance")))
    },
    render: (args)=>/*#__PURE__*/ React.createElement(ButtonWithModal, args)
};
const DefaultConfirm = {
    render: ()=>{
        const [confirmed, setConfirmed] = (0, external_react_namespaceObject.useState)(false);
        return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(external_ConfirmModal_js_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(react_namespaceObject.Text, {
            variant: 'sm',
            as: "span"
        }, "Confirmed!"));
    }
};
const DefaultConfirmWithCustomButton = {
    render: ()=>{
        const [confirmed, setConfirmed] = (0, external_react_namespaceObject.useState)(false);
        const [cancelled, setCancelled] = (0, external_react_namespaceObject.useState)(false);
        return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(external_ConfirmModal_js_default(), {
            trigger: /*#__PURE__*/ React.createElement(Button_js_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(react_namespaceObject.Text, {
            variant: 'xl',
            as: "span",
            ml: "4"
        }, confirmed && 'Confirmed 😁', cancelled && 'Cancelled 😢'));
    }
};
const ConfirmWithDeleteVariant = {
    render: ()=>{
        const [confirmed, setConfirmed] = (0, external_react_namespaceObject.useState)(false);
        return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(external_ConfirmModal_js_default(), {
            heading: "Hmm...",
            variant: "delete",
            trigger: /*#__PURE__*/ React.createElement(Button_js_default(), {
                variant: "outline-delete",
                leftIcon: /*#__PURE__*/ React.createElement(icons_namespaceObject.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(react_namespaceObject.Text, {
            mt: "4"
        }, "Deleted!"));
    }
};
const SimpleConfirmWithVariants = {
    render: ()=>/*#__PURE__*/ React.createElement(react_namespaceObject.ButtonGroup, null, /*#__PURE__*/ React.createElement(external_ConfirmModal_js_default(), {
            variant: "success",
            trigger: /*#__PURE__*/ React.createElement(Button_js_default(), null, "Good luck"),
            heading: "Success",
            onConfirm: ()=>{
                console.log('yes, you confirmed!');
            }
        }, /*#__PURE__*/ React.createElement(react_namespaceObject.Text, null, "You're off to great places, today is your day.")), /*#__PURE__*/ React.createElement(external_ConfirmModal_js_default(), {
            variant: "error",
            trigger: "Good luck",
            heading: "Better luck next time",
            onConfirm: ()=>{
                console.log('yes, you confirmed!');
            }
        }, /*#__PURE__*/ React.createElement(react_namespaceObject.Text, null, "You always pass failure on the way to success...")))
};
const ConfirmDeletingAnItem = {
    render: ()=>/*#__PURE__*/ React.createElement(react_namespaceObject.ButtonGroup, null, /*#__PURE__*/ React.createElement(external_ConfirmItemDeleteModal_js_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(external_ConfirmItemDeleteModal_js_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(react_namespaceObject.ButtonGroup, null, /*#__PURE__*/ React.createElement(external_ConfirmItemDeleteModal_js_default(), {
            itemType: "monday",
            trigger: "Delete",
            inputMatchText: "monday",
            onConfirm: (dismiss)=>{
                dismiss();
            }
        }))
};
const FormWithinModal = {
    render: ()=>{
        const [isCreating, setIsCreating] = (0, external_react_namespaceObject.useState)(false);
        return /*#__PURE__*/ React.createElement(external_ConfirmModal_js_default(), {
            trigger: /*#__PURE__*/ React.createElement(Button_js_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(react_namespaceObject.Stack, {
            spacing: 4
        }, /*#__PURE__*/ React.createElement(react_namespaceObject.Input, {
            name: "text",
            type: "text",
            placeholder: "Enter text"
        }), /*#__PURE__*/ React.createElement(Select_js_default(), {
            name: "dropdown",
            options: [
                {
                    label: 'Option 1',
                    value: '1'
                },
                {
                    label: 'Option 2',
                    value: '2'
                },
                {
                    label: 'Option 3',
                    value: '3'
                }
            ]
        }), /*#__PURE__*/ React.createElement(Section_js_default(), {
            variant: "secondary"
        }, /*#__PURE__*/ React.createElement(content_helper, null)), isCreating && /*#__PURE__*/ React.createElement(react_namespaceObject.Box, null, /*#__PURE__*/ React.createElement("p", null, "Creating..."))));
    }
};
var __webpack_export_target__ = exports;
for(var __webpack_i__ in __webpack_exports__)__webpack_export_target__[__webpack_i__] = __webpack_exports__[__webpack_i__];
if (__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, '__esModule', {
    value: true
});
