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__storybook_test__ from "@storybook/test";
import * as __WEBPACK_EXTERNAL_MODULE__Tabs_mjs__ from "./Tabs.mjs";
const meta = {
    title: 'Components/Tabs',
    component: __WEBPACK_EXTERNAL_MODULE__Tabs_mjs__["default"],
    parameters: {
        design: {
            type: 'figma',
            url: 'https://www.figma.com/file/bJcVrZNilxa06jYuVCGWYd/Redpanda-Design-System-2023?type=design&node-id=3-3592&mode=design'
        }
    }
};
/* ESM default export */ const Tabs_stories_rslib_entry_ = meta;
const Default = {
    args: {
        items: [
            {
                key: 'nodeJS',
                name: 'nodeJS',
                component: /*#__PURE__*/ React.createElement(React.Fragment, null, "nodeJS content")
            },
            {
                key: 'Java',
                name: 'Java',
                component: /*#__PURE__*/ React.createElement(React.Fragment, null, "Java content")
            },
            {
                key: 'C++',
                name: 'C++',
                component: /*#__PURE__*/ React.createElement(React.Fragment, null, "C++ content"),
                isDisabled: 'Disabled for X reason'
            }
        ]
    }
};
// More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing
const ReactNodeNames = {
    args: {
        items: [
            {
                key: 'nodeJS',
                name: /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Text, {
                    "data-testid": "node"
                }, "nodeJS"),
                component: /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Box, {
                    "data-testid": "node-content"
                }, "nodeJS content")
            },
            {
                key: 'Java',
                name: /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Heading, {
                    "data-testid": "java"
                }, "Java"),
                component: /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Box, {
                    "data-testid": "java-content"
                }, "Java content")
            },
            {
                key: 'C++',
                name: /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Box, {
                    "data-testid": "cplusplus"
                }, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Highlight, {
                    query: "spotlight"
                }, "C++")),
                component: /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Box, {
                    "data-testid": "cplusplus-content"
                }, "C++ content")
            }
        ],
        onChange: (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.fn)()
    },
    play: async ({ canvasElement, step })=>{
        const canvas = (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.within)(canvasElement);
        await step('Select NodeJS', async ()=>{
            await __WEBPACK_EXTERNAL_MODULE__storybook_test__.userEvent.click(canvas.getByTestId('node'));
            (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(canvas.getByTestId('node-content')).toHaveTextContent('nodeJS content');
        });
        await step('Select Java', async ()=>{
            await __WEBPACK_EXTERNAL_MODULE__storybook_test__.userEvent.click(canvas.getByTestId('java'));
            (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(canvas.getByTestId('java-content')).toHaveTextContent('Java content');
        });
        await step('Select C++', async ()=>{
            await __WEBPACK_EXTERNAL_MODULE__storybook_test__.userEvent.click(canvas.getByTestId('cplusplus'));
            (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(canvas.getByTestId('cplusplus-content')).toHaveTextContent('C++ content');
        });
    }
};
const LazyDemo = ()=>{
    const [isLoading, setIsLoading] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
    (0, __WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.useTimeout)(()=>{
        if (isLoading) setIsLoading(false);
    }, 5000);
    const items = [
        {
            key: 'nodeJS',
            name: 'nodeJS',
            component: 'Initially rendered data'
        },
        {
            key: 'Java',
            name: 'Java',
            component: isLoading ? /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Spinner, null) : /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Text, null, "Content")
        }
    ];
    return /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Tabs_mjs__["default"], {
        items: items,
        lazyBehavior: "unmount",
        onChange: (_index, key)=>{
            setIsLoading('Java' === key);
        }
    });
};
const TabsFitted = {
    args: {
        isFitted: true,
        variant: 'fitted',
        size: 'sm',
        items: [
            {
                key: 'nodeJS',
                name: 'nodeJS',
                component: /*#__PURE__*/ React.createElement(React.Fragment, null, "nodeJS content")
            },
            {
                key: 'Java',
                name: 'Java',
                component: /*#__PURE__*/ React.createElement(React.Fragment, null, "Java content")
            },
            {
                key: 'C++',
                name: 'C++',
                component: /*#__PURE__*/ React.createElement(React.Fragment, null, "C++ content"),
                isDisabled: 'Disabled for X reason'
            }
        ]
    }
};
export { Default, LazyDemo, ReactNodeNames, TabsFitted, Tabs_stories_rslib_entry_ as default };
