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__RadioGroup_mjs__ from "./RadioGroup.mjs";
import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
const meta = {
    title: 'Components/Inputs/RadioGroup',
    component: __WEBPACK_EXTERNAL_MODULE__RadioGroup_mjs__["default"],
    parameters: {
        design: {
            type: 'figma',
            url: 'https://www.figma.com/file/Ah1H7iNSgKNAgtes0av2tM/Cloud-v2-mocks?type=design&node-id=10419-22858&mode=design&t=5nLpKzxeJBMdpXNt-4'
        }
    }
};
/* ESM default export */ const RadioGroup_stories_rslib_entry_ = meta;
const Default = {
    args: {
        name: 'field-name',
        defaultValue: '1',
        options: [
            {
                value: '1',
                label: 'Option 1'
            },
            {
                value: '2',
                label: 'Option 2'
            },
            {
                value: '3',
                label: 'Option 3'
            },
            {
                value: '4',
                label: 'Option 4',
                disabled: true
            },
            {
                value: '5',
                label: 'Option 5',
                invalid: true
            },
            {
                value: '6',
                label: 'Option 6',
                disabled: true,
                invalid: true
            }
        ],
        onChange: (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.fn)()
    },
    play: async ({ canvasElement, step })=>{
        const canvas = (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.within)(canvasElement);
        await step('Check defaults', async ()=>{
            (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(canvas.getByText('Option 1')).toBeVisible();
            (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(canvas.getByText('Option 2')).toBeVisible();
            (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(canvas.getByText('Option 3')).toBeVisible();
            (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(canvas.getByText('Option 4')).toBeVisible();
            (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(canvas.getByText('Option 4')).toHaveAttribute('data-disabled');
            (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(canvas.getByText('Option 5')).toBeVisible();
            (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(canvas.getByText('Option 5')).toBeValid();
            (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(canvas.getByText('Option 6')).toBeVisible();
            (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(canvas.getByText('Option 6')).toHaveAttribute('data-disabled');
            (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(canvas.getByText('Option 6')).toHaveAttribute('data-invalid'); // Can only be invalid if we also have disabled attribute
        });
        await step('Change option', async ()=>{
            // Default
            (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(canvas.getByText('Option 1')).toHaveAttribute('data-checked');
            __WEBPACK_EXTERNAL_MODULE__storybook_test__.fireEvent.click(canvas.getByText('Option 3'));
            (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(canvas.getByText('Option 1')).not.toHaveAttribute('data-checked');
            (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(canvas.getByText('Option 3')).toHaveAttribute('data-checked');
        });
    }
};
const AttachedGroup = {
    args: {
        name: 'field-name',
        isAttached: true,
        options: [
            {
                value: '1',
                label: 'Option 1'
            },
            {
                value: '2',
                label: 'Option 2'
            },
            {
                value: '3',
                label: 'Option 3'
            },
            {
                value: '4',
                label: 'Option 4',
                disabled: true
            },
            {
                value: '5',
                label: 'Option 5',
                invalid: true
            },
            {
                value: '6',
                label: 'Option 6',
                disabled: true,
                invalid: true
            }
        ],
        onChange: (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.fn)()
    }
};
function CustomCardTemplate(props) {
    return /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Box, {
        my: 4
    }, /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Heading, {
        size: "md"
    }, props.heading), /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.UnorderedList, null, /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.ListItem, null, "Lorem, ipsum dolor sit amet"), /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.ListItem, null, "Lorem, ipsum dolor sit amet"), /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.ListItem, null, "Lorem, ipsum dolor sit amet")));
}
const CustomTemplateGroup = {
    args: {
        name: 'field-name',
        options: [
            {
                value: '1',
                label: /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(CustomCardTemplate, {
                    heading: "Option 1"
                })
            },
            {
                value: '2',
                label: /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(CustomCardTemplate, {
                    heading: "Option 2"
                })
            },
            {
                value: '3',
                label: /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(CustomCardTemplate, {
                    heading: "Option 3"
                })
            },
            {
                value: '4',
                label: /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(CustomCardTemplate, {
                    heading: "Option 4"
                }),
                disabled: true
            },
            {
                value: '5',
                label: /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(CustomCardTemplate, {
                    heading: "Option 5"
                }),
                invalid: true
            },
            {
                value: '6',
                label: /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(CustomCardTemplate, {
                    heading: "Option 6"
                }),
                disabled: true,
                invalid: true
            }
        ]
    }
};
const ControlledRadioGroup = {
    render: ()=>{
        // initial value
        const [value, setValue] = __WEBPACK_EXTERNAL_MODULE_react__["default"].useState('1');
        return /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__RadioGroup_mjs__["default"], {
            name: 'field-name',
            onChange: (e)=>{
                console.log('onChange called: ', e);
                if (confirm('Are you sure?')) setValue(e);
            },
            value: value,
            options: [
                {
                    value: '1',
                    label: 'Option 1'
                },
                {
                    value: '2',
                    label: 'Option 2'
                },
                {
                    value: '3',
                    label: 'Option 3'
                },
                {
                    value: '4',
                    label: 'Option 4',
                    disabled: true
                },
                {
                    value: '5',
                    label: 'Option 5',
                    invalid: true
                },
                {
                    value: '6',
                    label: 'Option 6',
                    disabled: true,
                    invalid: true
                }
            ]
        });
    }
};
const DirectionColumn = {
    args: {
        name: 'field-name',
        isAttached: true,
        direction: 'column',
        options: [
            {
                value: '1',
                label: 'Option 1'
            },
            {
                value: '2',
                label: 'Option 2'
            },
            {
                value: '3',
                label: 'Option 3'
            },
            {
                value: '4',
                label: 'Option 4',
                disabled: true
            },
            {
                value: '5',
                label: 'Option 5',
                invalid: true
            },
            {
                value: '6',
                label: 'Option 6',
                disabled: true,
                invalid: true
            }
        ]
    }
};
export { AttachedGroup, ControlledRadioGroup, CustomTemplateGroup, Default, DirectionColumn, RadioGroup_stories_rslib_entry_ as default };
