import { useRef, useState } from 'react';
import { SearchInput, Select, Option, Grid, useI18n, Flex } from '@pega/cosmos-react-core';
import { searchResults as mockSearchResults, recentSearches } from './SearchInput.mocks';
export default {
    title: 'Core/SearchInput',
    component: SearchInput
};
export const SearchInputFullDemo = () => {
    return (<Flex container={{ direction: 'column', rowGap: 2 }}>
      <SearchInput value='Search value' onSearchChange={() => { }} onSearchSubmit={() => { }} filters={['Story', 'Very long filter']}/>
      <SearchInput value='' onSearchChange={() => { }} onSearchSubmit={() => { }} filters={['Story', 'Very long filter']}/>
      <SearchInput value='Search value' onSearchChange={() => { }} onSearchSubmit={() => { }} filters={undefined}/>
      <SearchInput value='' onSearchChange={() => { }} onSearchSubmit={() => { }} filters={undefined}/>{' '}
      <SearchInput value='Search value' onSearchChange={() => { }} onSearchSubmit={undefined} filters={['Story', 'Very long filter']}/>
      <SearchInput value='' onSearchChange={() => { }} onSearchSubmit={undefined} filters={['Story', 'Very long filter']}/>
      <SearchInput value='Search value' onSearchChange={() => { }} onSearchSubmit={undefined} filters={undefined}/>
      <SearchInput value='' onSearchChange={() => { }} onSearchSubmit={undefined} filters={undefined}/>
    </Flex>);
};
export const SearchInputDemo = (args) => {
    const [value, setValue] = useState('');
    return (<SearchInput onSearchSubmit={args.hideSubmitButton ? undefined : () => { }} {...args} onSearchChange={setValue} value={value}/>);
};
SearchInputDemo.args = {
    hideSubmitButton: false
};
SearchInputDemo.argTypes = {
    hideSubmitButton: { control: { type: 'boolean' } }
};
export const EnhancedSearchInputDemo = (args) => {
    const [value, setValue] = useState('');
    const t = useI18n();
    const [searchResults, setSearchResults] = useState([]);
    const [loading, setLoading] = useState(false);
    const timeout = useRef(null);
    const onValueChange = (val) => {
        setValue(val);
        setLoading(true);
        setSearchResults([]);
        if (timeout.current) {
            clearTimeout(timeout.current);
        }
        timeout.current = window.setTimeout(() => {
            if (val) {
                setSearchResults(mockSearchResults.filter(res => {
                    return res.primary.toLowerCase().includes(val.toLowerCase());
                }));
            }
            setLoading(false);
        }, 2200);
    };
    return (<SearchInput filters={['Story', 'Very long filter']} filtersLabel={t('case_type')} loading={loading} searchResults={searchResults?.map(result => ({
            ...result,
            onClick: (id, e) => e.preventDefault()
        }))} value={value} onSearchChange={onValueChange} onSearchSubmit={args.hideSubmitButton ? undefined : () => { }} recentSearches={recentSearches} advancedSearchLink={{ href: '/?path=/story/work-searchresults--search-results-demo' }}/>);
};
EnhancedSearchInputDemo.args = {
    hideSubmitButton: false
};
EnhancedSearchInputDemo.argTypes = {
    hideSubmitButton: { control: { type: 'boolean' } }
};
export const ControlledSearchInputDemo = () => {
    const [value, setValue] = useState('');
    const [currentFilter, setCurrentFilter] = useState('');
    const t = useI18n();
    return (<Grid container={{ gap: 2, areas: '"a a" "b c"', alignItems: 'end' }}>
      <Grid item={{ area: 'a' }}>
        <p>This demonstrates that SearchInput filter can be controlled from an external state.</p>
      </Grid>
      <Grid item={{ area: 'b' }}>
        <SearchInput currentFilter={currentFilter} filters={Array.from({ length: 10 }, (_, i) => `Filter ${i + 1}`)} filtersLabel={t('case_type')} value={value} onSearchChange={setValue} onSearchSubmit={() => { }} onFilterChange={setCurrentFilter}/>
      </Grid>

      <Grid item={{ area: 'c' }}>
        <Select label='Control Search Filter' value={currentFilter} onChange={e => setCurrentFilter(e.target.value)}>
          <Option>All</Option>
          {Array.from({ length: 10 }, (_, i) => (<Option>{`Filter ${(i + 1).toString()}`}</Option>))}
        </Select>
      </Grid>
    </Grid>);
};
//# sourceMappingURL=SearchInput.stories.jsx.map