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__Select_mjs__ from "./Select.mjs";
import * as __WEBPACK_EXTERNAL_MODULE__Accordion_Accordion_mjs__ from "../../Accordion/Accordion.mjs";
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/Inputs/Select',
    component: __WEBPACK_EXTERNAL_MODULE__Select_mjs__["default"],
    parameters: {
        design: {
            type: 'figma',
            url: 'https://www.figma.com/file/bJcVrZNilxa06jYuVCGWYd/Redpanda-Design-System-2023?type=design&node-id=36-922&mode=design&t=cVtmR0UCPQ2Em08Q-4'
        }
    }
};
/* ESM default export */ const Select_stories_rslib_entry_ = meta;
const SingleSelect = {
    args: {
        name: 'regionField',
        placeholder: 'Select region',
        options: [
            {
                label: 'eu-central-1',
                value: 'eu-central-1'
            },
            {
                label: 'us-east-1',
                value: 'us-east-1'
            }
        ]
    },
    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('Select region')).toBeVisible();
        });
    }
};
const CreatableSingleSelect = {
    args: {
        name: 'regionField',
        placeholder: 'Select region',
        options: [
            {
                label: 'eu-central-1',
                value: 'eu-central-1'
            },
            {
                label: 'us-east-1',
                value: 'us-east-1'
            }
        ],
        creatable: true
    },
    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('Select region')).toBeVisible();
        });
    }
};
const NoLabelSingle = {
    args: {
        name: 'regionField',
        placeholder: 'Select region',
        options: [
            {
                value: 'eu-central-1'
            },
            {
                value: 'us-east-1'
            }
        ]
    }
};
const NoLabelMulti = {
    args: {
        name: 'regionField',
        placeholder: 'Select regions',
        isMulti: true,
        options: [
            {
                value: 'eu-central-1'
            },
            {
                value: 'us-east-1'
            },
            {
                value: 'us-west-1'
            }
        ]
    }
};
const NoLabelGroup = {
    args: {
        name: 'regionField',
        placeholder: 'Select region',
        options: [
            {
                label: 'Europe',
                options: [
                    {
                        value: 'eu-central-1'
                    }
                ]
            },
            {
                label: 'US',
                options: [
                    {
                        value: 'us-east-1'
                    }
                ]
            }
        ]
    }
};
const NoLabelGroupMulti = {
    args: {
        name: 'regionField',
        placeholder: 'Select regions',
        isMulti: true,
        options: [
            {
                label: 'Europe',
                options: [
                    {
                        value: 'eu-central-1'
                    }
                ]
            },
            {
                label: 'US',
                options: [
                    {
                        value: 'us-east-1'
                    }
                ]
            }
        ]
    }
};
const DefaultSingleSelect = {
    args: {
        name: 'regionField',
        placeholder: 'Select region',
        defaultValue: {
            label: 'eu-central-1',
            value: 'eu-central-1'
        },
        options: [
            {
                label: 'eu-central-1',
                value: 'eu-central-1'
            },
            {
                label: 'us-east-1',
                value: 'us-east-1'
            }
        ]
    }
};
const MultiSelect = {
    args: {
        name: 'regionField',
        placeholder: 'Select multiple regions',
        isMulti: true,
        options: [
            {
                label: 'eu-central-1',
                value: 'eu-central-1'
            },
            {
                label: 'eu-west-1',
                value: 'eu-west-1'
            },
            {
                label: 'eu-east-1',
                value: 'eu-east-1'
            }
        ]
    }
};
const CreatableMultiSelect = {
    args: {
        name: 'regionField',
        placeholder: 'Select multiple regions',
        isMulti: true,
        options: [
            {
                label: 'eu-central-1',
                value: 'eu-central-1'
            },
            {
                label: 'eu-west-1',
                value: 'eu-west-1'
            },
            {
                label: 'eu-east-1',
                value: 'eu-east-1'
            }
        ],
        creatable: true
    }
};
const DefaultMultiSelect = {
    args: {
        name: 'regionField',
        placeholder: 'Select multiple regions',
        isMulti: true,
        options: [
            {
                label: 'eu-central-1',
                value: 'eu-central-1'
            },
            {
                label: 'eu-west-1',
                value: 'eu-west-1'
            },
            {
                label: 'eu-east-1',
                value: 'eu-east-1'
            }
        ],
        defaultValue: [
            {
                label: 'eu-central-1',
                value: 'eu-central-1'
            },
            {
                label: 'eu-west-1',
                value: 'eu-west-1'
            }
        ]
    }
};
const Group = {
    args: {
        name: 'regionField',
        placeholder: 'Select region',
        options: [
            {
                label: 'Europe',
                options: [
                    {
                        label: 'eu-central-1',
                        value: 'eu-central-1'
                    }
                ]
            },
            {
                label: 'US',
                options: [
                    {
                        label: 'us-east-1',
                        value: 'us-east-1'
                    }
                ]
            }
        ]
    }
};
const MultiGroup = {
    args: {
        name: 'regionField',
        placeholder: 'Select multiple regions',
        isMulti: true,
        options: [
            {
                label: 'Europe',
                options: [
                    {
                        label: 'eu-central-1',
                        value: 'eu-central-1'
                    }
                ]
            },
            {
                label: 'US',
                options: [
                    {
                        label: 'us-east-1',
                        value: 'us-east-1'
                    }
                ]
            }
        ]
    }
};
const MaxSelect = {
    args: {
        name: 'regionField',
        placeholder: 'Select max 2 regions',
        max: 2,
        isMulti: true,
        options: [
            {
                label: 'eu-central-1',
                value: 'eu-central-1'
            },
            {
                label: 'eu-west-1',
                value: 'eu-west-1'
            },
            {
                label: 'eu-east-1',
                value: 'eu-east-1'
            }
        ]
    }
};
const Advanced = {
    args: {
        name: 'regionField',
        placeholder: 'Select max 2 regions',
        max: 2,
        isMulti: true,
        defaultValue: [
            {
                label: 'eu-central-1',
                value: 'eu-central-1'
            }
        ],
        options: [
            {
                label: 'Europe',
                options: [
                    {
                        label: 'eu-central-1',
                        value: 'eu-central-1'
                    }
                ]
            },
            {
                label: 'US',
                options: [
                    {
                        label: 'us-west-1',
                        value: 'us-west-1'
                    },
                    {
                        label: 'us-east-1',
                        value: 'us-east-1'
                    }
                ]
            }
        ]
    },
    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('eu-central-1')).toBeVisible();
            (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(canvas.getByTestId('select-dropdown-indicator')).toBeVisible();
        });
        await step('Clear option', async ()=>{
            __WEBPACK_EXTERNAL_MODULE__storybook_test__.fireEvent.click(canvas.getByRole('button'));
        });
        await step('Click dropdown', async ()=>{
            __WEBPACK_EXTERNAL_MODULE__storybook_test__.fireEvent.click(canvas.getByTestId('select-dropdown-indicator'));
        // TODO: Check options
        });
    }
};
const SelectTypeInferring = ()=>{
    const [state, setState] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)({
        cleanupPolicy: 'delete'
    });
    return /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Box, {
        width: "100%"
    }, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Select_mjs__["default"], {
        isMulti: false,
        options: [
            {
                value: 'delete'
            },
            {
                value: 'compact'
            }
        ],
        value: {
            value: state.cleanupPolicy
        },
        onChange: (e)=>{
            if (e && (0, __WEBPACK_EXTERNAL_MODULE__Select_mjs__.isSingleValue)(e) && e.value) setState({
                cleanupPolicy: e.value
            });
        }
    }));
};
const SelectTypeInferringMulti = ()=>{
    const [state, setState] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)({
        cleanupPolicy: [
            'delete'
        ]
    });
    return /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Box, {
        width: "100%"
    }, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Select_mjs__["default"], {
        isMulti: true,
        options: [
            {
                value: 'delete'
            },
            {
                value: 'compact'
            }
        ],
        value: state.cleanupPolicy?.map((policy)=>({
                value: policy
            })),
        onChange: (e)=>{
            if (e && (0, __WEBPACK_EXTERNAL_MODULE__Select_mjs__.isMultiValue)(e)) setState({
                cleanupPolicy: e.map(({ value })=>value)
            });
        }
    }));
};
const ControlledWithRef = ()=>{
    const someRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Select_mjs__["default"], {
        innerRef: someRef,
        options: [
            {
                label: 'Europe',
                options: [
                    {
                        label: 'eu-central-1',
                        value: 'eu-central-1'
                    }
                ]
            },
            {
                label: 'US',
                options: [
                    {
                        label: 'us-west-1',
                        value: 'us-west-1'
                    },
                    {
                        label: 'us-east-1',
                        value: 'us-east-1'
                    }
                ]
            }
        ]
    }), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.ButtonGroup, {
        mt: 8
    }, /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Button, {
        onClick: ()=>someRef.current?.clearValue()
    }, "Click to reset"), /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Button, {
        onClick: ()=>someRef.current?.setValue({
                label: 'us-west-1',
                value: 'us-west-1'
            }, 'select-option')
    }, "Click to control value")));
};
const EmptyState = ()=>/*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Select_mjs__["default"], {
        options: []
    });
const LoadingState = ()=>/*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Select_mjs__["default"], {
        isLoading: true,
        options: []
    });
const WithAccordion = ()=>/*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Accordion_Accordion_mjs__["default"], {
        allowMultiple: true,
        defaultIndex: [
            0
        ],
        items: [
            {
                heading: 'Item 1',
                description: /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__Select_mjs__["default"], {
                    options: [
                        {
                            label: 'Option 1',
                            value: 'option-1'
                        },
                        {
                            label: 'Option 2',
                            value: 'option-2'
                        },
                        {
                            label: 'Option 3',
                            value: 'option-3'
                        },
                        {
                            label: 'Option 4',
                            value: 'option-4'
                        },
                        {
                            label: 'Option 5',
                            value: 'option-5'
                        },
                        {
                            label: 'Option 6',
                            value: 'option-6'
                        },
                        {
                            label: 'Option 7',
                            value: 'option-7'
                        },
                        {
                            label: 'Option 8',
                            value: 'option-8'
                        },
                        {
                            label: 'Option 9',
                            value: 'option-9'
                        }
                    ]
                })
            },
            {
                heading: 'Item 2',
                description: /*#__PURE__*/ React.createElement(content_helper, null)
            },
            {
                heading: 'Item 3',
                description: /*#__PURE__*/ React.createElement(content_helper, null)
            }
        ]
    });
export { Advanced, ControlledWithRef, CreatableMultiSelect, CreatableSingleSelect, DefaultMultiSelect, DefaultSingleSelect, EmptyState, Group, LoadingState, MaxSelect, MultiGroup, MultiSelect, NoLabelGroup, NoLabelGroupMulti, NoLabelMulti, NoLabelSingle, SelectTypeInferring, SelectTypeInferringMulti, SingleSelect, WithAccordion, Select_stories_rslib_entry_ as default };
