<!--- Search.stories.mdx --->

import { ArgsTable, Meta, Canvas, Story } from '@storybook/addon-docs';
import { Stack } from '@strapi/design-system/Stack';
import matchSorter from 'match-sorter';
import useQueryParams from '../../hooks/useQueryParams';
import SearchURLQuery from './index';

<Meta title="components/SearchURLQuery" />

# SearchURLQuery

This component provides and input to search an array

## Imports

```js
import { SearchURLQuery } from '@strapi/helper-plugin';
import { useIntl } from 'react-intl';
```

## Usage

```jsx
import { SearchURLQuery, useQueryParams } from '@strapi/helper-plugin';
import matchSorter from 'match-sorter';

const HomePage = () => {
  const [{ query }] = useQueryParams()
  const { formatMessage } = useIntl();
  const _q = query?._q || ''
  const items = [{name: 'Paul', instrument: 'bass'}, {name: 'George', instrument: 'guitar'}]
  
  const sortedList = matchSorter(items, _q, {keys: ['name', 'instrument']})
  const itemsList = sortedList?.length ? sortedList : items

  return (
    <SearchURLQuery
      label={formatMessage({
        id: 'app.component.search.label',
        defaultMessage: 'Search for {target}' },
        { target: 'users' }
      )}
      // Use this props to send an event
      trackedEvent="didSearch"
    />
    {itemsList.map(item => (
      <div>
        <h1>{item.name}</h1>
        <p>{item.instrument}</p>
      </div>
    ))}
  )
};
```

## Base

<Canvas>
  <Story name="base">
    {() => {
      const [{ query }] = useQueryParams()
      const _q = query?._q || ''
      const items = [{name: 'Paul', instrument: 'bass'}, {name: 'George', instrument: 'guitar'}]
      const sortedList = matchSorter(items, _q, {keys: ['name', 'instrument']})
      const itemsList = sortedList?.length ? sortedList : items;
      return (
        <Stack paddingTop={6} size={4}>
          <SearchURLQuery label="Label" />
          {itemsList.map((item, i) => (
            <div key={i}>
              <h1>{item.name}</h1>
              <p>{item.instrument}</p>
            </div>
          ))}
        </Stack>
      );
    }}
  </Story>
</Canvas>

<ArgsTable of={SearchURLQuery} />
