import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
import * as __WEBPACK_EXTERNAL_MODULE__chakra_ui_react__ from "@chakra-ui/react";
import * as __WEBPACK_EXTERNAL_MODULE__Popover_mjs__ from "./Popover.mjs";
import * as __WEBPACK_EXTERNAL_MODULE__PopoverContent_mjs__ from "./PopoverContent.mjs";
import * as __WEBPACK_EXTERNAL_MODULE__storybook_test__ from "@storybook/test";
const meta = {
    title: 'Components/RedPandaPopover',
    component: __WEBPACK_EXTERNAL_MODULE__Popover_mjs__["default"],
    argTypes: {
        trigger: {
            control: 'radio',
            options: [
                'hover',
                'click'
            ]
        },
        size: {
            control: 'select',
            options: [
                'sm',
                'md',
                'lg',
                'xl',
                'auto'
            ]
        },
        placement: {
            control: 'select',
            options: [
                'top',
                'right',
                'bottom',
                'left'
            ]
        }
    },
    args: {
        trigger: 'hover',
        size: 'sm',
        placement: 'top'
    }
};
/* ESM default export */ const Popover_stories_rslib_entry_ = meta;
const Default = {
    render: (args)=>/*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__Popover_mjs__["default"], args, /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.PopoverTrigger, null, /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Button, null, "Trigger (", args.trigger, ")")), /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__PopoverContent_mjs__["default"], null, /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.PopoverArrow, null), /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.PopoverCloseButton, {
            "data-testid": "popover-close-button"
        }), /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.PopoverHeader, null, "Confirmation!"), /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.PopoverBody, {
            "data-testid": "popover-body"
        }, "Are you sure you want to have that milkshake?"))),
    play: async ({ canvasElement, step })=>{
        const user = __WEBPACK_EXTERNAL_MODULE__storybook_test__.userEvent.setup();
        const canvas = (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.within)(canvasElement);
        await step('Check defaults', async ()=>{
            await (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.waitFor)(()=>{
                (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(canvas.getByTestId('popover-body')).toBeInTheDocument();
                (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(canvas.getByTestId('popover-body')).not.toBeVisible();
            });
        });
        user.hover(canvas.getByText('Trigger (hover)'));
        await step('Triggering hover event shows visibility', async ()=>{
            await (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.waitFor)(()=>{
                (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(canvas.getByTestId('popover-body')).toBeInTheDocument();
                (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(canvas.getByTestId('popover-body')).toBeVisible();
            });
        });
        __WEBPACK_EXTERNAL_MODULE__storybook_test__.fireEvent.click(canvas.getByTestId('popover-close-button'));
        await step('Dismissing popover hides popover body', async ()=>{
            await (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.waitFor)(()=>{
                (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(canvas.getByTestId('popover-body')).toBeInTheDocument();
                (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(canvas.getByTestId('popover-body')).not.toBeVisible();
            });
        });
    }
};
const PopoverOnHover = {
    render: (args)=>/*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__Popover_mjs__["default"], args, /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.PopoverTrigger, null, /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement("span", null, "Trigger (", args.trigger, ")")), /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Portal, null, /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__PopoverContent_mjs__["default"], null, /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.PopoverArrow, null), /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.PopoverCloseButton, null), /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.PopoverHeader, null, "Confirmation!"), /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.PopoverBody, null, /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement("p", null, "Are you sure you want to have that milkshake?")))))
};
const PopoverWithProps = {
    argTypes: {
        hideCloseButton: {
            control: 'boolean'
        }
    },
    args: {
        hideCloseButton: false
    },
    render: (args)=>/*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__Popover_mjs__["default"], {
            title: "My Popover Title",
            content: /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE_react__["default"].Fragment, null, /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement("p", null, "Due to browser restrictions, the clipboard is not accessible on unsecure connections."), /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement("br", null), /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement("p", null, "Please make sure to run Redpanda Console with SSL enabled to use this feature.")),
            ...args
        }, "Trigger (", args.trigger, ")")
};
const PopoverWithFocusRef = {
    render: (args)=>{
        const initialFocusRef = __WEBPACK_EXTERNAL_MODULE_react__["default"].useRef(null);
        return /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__Popover_mjs__["default"], {
            trigger: "click",
            initialFocusRef: initialFocusRef,
            content: /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE_react__["default"].Fragment, null, /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement("p", null, "Are you sure you want to have that burger? Type yes or no."), /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement("p", null, /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement("input", {
                type: "text",
                placeholder: "Enter",
                ref: initialFocusRef
            }))),
            ...args
        }, /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement("button", {
            type: "button"
        }, "Trigger (", args.trigger, ")"));
    }
};
const PopoverWithSize = {
    render: (args)=>/*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__Popover_mjs__["default"], {
            size: "auto",
            placement: "right",
            hideCloseButton: true,
            content: /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement("div", {
                style: {
                    maxWidth: '500px',
                    minWidth: 'max-content',
                    whiteSpace: 'pre-wrap'
                }
            }, "com.redpanda.kafka.connect.gcs.GcsSinkConnector"),
            ...args
        }, "Trigger (", args.trigger, ")")
};
const FocusElementOnPopoverOpen = {
    name: 'Focus Element on Open',
    render: (args)=>{
        const initialFocusRef = __WEBPACK_EXTERNAL_MODULE_react__["default"].useRef(null);
        return /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__Popover_mjs__["default"], {
            initialFocusRef: initialFocusRef,
            placement: "bottom",
            closeOnBlur: false,
            trigger: "click",
            ...args
        }, /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.PopoverTrigger, null, /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Button, null, "Trigger (", args.trigger, ")")), /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Portal, null, /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__PopoverContent_mjs__["default"], {
            color: "white",
            bg: "blue.800",
            borderColor: "blue.800"
        }, /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.PopoverHeader, {
            pt: 4,
            fontWeight: "bold",
            color: "white",
            border: "0"
        }, "Manage Your Channels"), /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.PopoverArrow, {
            bg: "blue.800"
        }), /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.PopoverCloseButton, null), /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.PopoverBody, null, "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore."), /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.PopoverFooter, {
            border: "0",
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            pb: 4
        }, /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Box, {
            fontSize: "sm"
        }, "Step 2 of 4"), /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.ButtonGroup, {
            size: "sm"
        }, /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Button, {
            colorScheme: "green"
        }, "Setup Email"), /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Button, {
            colorScheme: "blue",
            ref: initialFocusRef
        }, "Next"))))));
    }
};
export { Default, FocusElementOnPopoverOpen, PopoverOnHover, PopoverWithFocusRef, PopoverWithProps, PopoverWithSize, Popover_stories_rslib_entry_ as default };
