import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
import * as __WEBPACK_EXTERNAL_MODULE__storybook_test__ from "@storybook/test";
import * as __WEBPACK_EXTERNAL_MODULE__SearchField_mjs__ from "./SearchField.mjs";
const meta = {
    title: 'Components/SearchField',
    component: __WEBPACK_EXTERNAL_MODULE__SearchField_mjs__["default"],
    parameters: {
        design: {
            type: 'figma',
            url: 'https://www.figma.com/file/bJcVrZNilxa06jYuVCGWYd/Redpanda-Design-System-2023?type=design&node-id=37-1227&mode=design&t=cVtmR0UCPQ2Em08Q-4'
        }
    }
};
/* ESM default export */ const SearchField_stories_rslib_entry_ = meta;
const Search = {
    render: (args)=>{
        const [searchText, setSearchText] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)('');
        return /*#__PURE__*/ React.createElement(__WEBPACK_EXTERNAL_MODULE__SearchField_mjs__["default"], {
            ...args,
            searchText: searchText,
            setSearchText: setSearchText
        });
    },
    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.getByPlaceholderText('Search...')).toBeVisible();
            (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(canvas.getByTestId('search-field-input')).toBeVisible();
            (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(canvas.getByTestId('search-field-search-icon')).toBeVisible();
            (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(canvas.queryByTestId('search-field-reset-icon')).not.toBeInTheDocument();
        });
        await step('Type', async ()=>{
            __WEBPACK_EXTERNAL_MODULE__storybook_test__.fireEvent.change(canvas.getByTestId('search-field-input'), {
                target: {
                    value: '12345'
                }
            });
        });
        await step('Check after typing', async ()=>{
            (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(canvas.getByTestId('search-field-input')).toHaveValue('12345');
            (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(canvas.queryByTestId('search-field-search-icon')).not.toBeInTheDocument();
            (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(canvas.getByTestId('search-field-reset-icon')).toBeVisible();
        });
        await step('Press reset', async ()=>{
            __WEBPACK_EXTERNAL_MODULE__storybook_test__.fireEvent.click(canvas.getByTestId('search-field-reset-icon'));
        });
        await step('Check after reset', async ()=>{
            (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(canvas.getByTestId('search-field-input')).not.toHaveValue();
            (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(canvas.getByTestId('search-field-search-icon')).toBeVisible();
            (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(canvas.queryByTestId('search-field-reset-icon')).not.toBeInTheDocument();
            (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(canvas.getByPlaceholderText('Search...')).toBeVisible();
        });
    }
};
const Filter = {
    args: {
        placeholderText: 'Filter...',
        icon: 'filter'
    },
    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.getByPlaceholderText('Filter...')).toBeVisible();
            (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(canvas.getByTestId('search-field-input')).toBeVisible();
            (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(canvas.getByTestId('search-field-search-icon')).toBeVisible();
            (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(canvas.queryByTestId('search-field-reset-icon')).not.toBeInTheDocument();
        });
    }
};
const Disabled = {
    args: {
        placeholderText: 'Filter...',
        icon: 'filter',
        isDisabled: true
    },
    play: async ({ canvasElement, step })=>{
        const canvas = (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.within)(canvasElement);
        await step('Check disabled state', async ()=>{
            (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(canvas.getByPlaceholderText('Filter...')).toBeVisible();
            (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(canvas.getByTestId('search-field-input')).toBeVisible();
            (0, __WEBPACK_EXTERNAL_MODULE__storybook_test__.expect)(canvas.getByTestId('search-field-input')).toBeDisabled();
        });
    }
};
const CustomWidth = {
    args: {
        placeholderText: 'Filter...',
        icon: 'filter',
        maxWidth: '500px'
    }
};
export { CustomWidth, Disabled, Filter, Search, SearchField_stories_rslib_entry_ as default };
