import type {Meta, StoryObj} from '@storybook/react';
import SearchBar from '../../components/UI/SearchBar/SearchBar';
import MakeCustomRadioSelect from "../../components/UI/Forms/CustomSelect/MakeCustomRadioSelect";
import {selectOptionFactory} from "../Forms/CustomSelect.stories";

const meta: Meta<typeof SearchBar> = {
    title: 'Components/SearchBar/SearchBar',
    component: SearchBar,
    decorators: [
        (Story) => (
            <div style={{paddingTop: '5rem'}}>
                <Story/>
            </div>
        ),
    ]
};

export default meta;
type Story = StoryObj<typeof SearchBar>;

export const SearchBarEx: Story = {
    args: {
        onSearch: () => console.log('Searched'),
        placeholder: 'Preview Placeholder',
        inputDisabled: false,
        children: '',
        value: '',
        hasSearch: true
    },
    argTypes: {
        onSearch: {
            action: "onSearch",
        },
    }
};



export const SearchBarWithFiltersEx: Story = {

    args: {
        onSearch: () => console.log('Searched'),
        placeholder: 'Preview Placeholder',
        inputDisabled: false,
        // @ts-ignore
        children: <MakeCustomRadioSelect
            value={1}
            theme={'search-listbox'}
            options={selectOptionFactory()} />,
        value: '',
        hasSearch: true
    },
    argTypes: {
        onSearch: {
            action: "onSearch",
        },
    }
};