import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
import { colorGuide } from '../../primitives';
import { SearchBar } from '..';

<Meta title="Components/SearchBar" component={SearchBar} />

# SearchBar

SearchBar component allows to render a flexible search input field with change and submit event support.

export const BasicSearch = (args) => <SearchBar {...args} />;

## Usage

### 1. Search with icon

<Canvas>
    <Story
        name="Search with icon"
        args={{
            icon: { uri: 'https://cdn-icons-png.flaticon.com/512/482/482631.png' },
            placeholder: 'search query here',
            colorConfig: colorGuide.lightComponents.searchBar,
            inputFieldColorConfig: colorGuide.lightComponents.inputFields,
            onSearchInput: (value) => {
                console.log('Search query:', value);
            },
            onSubmit: () => {
                console.log('Search query submitted');
            },
        }}
    >
        {BasicSearch.bind({})}
    </Story>
</Canvas>

```jsx
import * as React from 'react';
import { SearchBar } from 'neopop-react-native/components';
import { colorGuide } from 'neopop-react-native/primitives';

const SearchInputField = () => {
    const handleChange = (value) => {
        console.log('Search query: ', value);
    };
    const handleSubmit = () => {
        console.log('Search query submitted');
    };

    return (
        <SearchBar
            icon={{ uri: 'https://cdn-icons-png.flaticon.com/512/482/482631.png' }}
            placeholder="search query here"
            colorConfig={colorGuide.lightComponents.searchBar}
            inputFieldColorConfig={colorGuide.lightComponents.inputFields}
            onSearchInput={handleChange}
            onSubmit={handleSubmit}
        />
    );
};

export default SearchInputField;
```

### 2. Search without icon

<Canvas>
    <Story
        name="Search without icon"
        args={{
            placeholder: 'search query here',
            colorConfig: colorGuide.lightComponents.searchBar,
            inputFieldColorConfig: colorGuide.lightComponents.inputFields,
            onSearchInput: (value) => {
                console.log('Search query:', value);
            },
            onSubmit: () => {
                console.log('Search query submitted');
            },
        }}
    >
        {BasicSearch.bind({})}
    </Story>
</Canvas>

```jsx
import * as React from 'react';
import { SearchBar } from 'neopop-react-native/components';
import { colorGuide } from 'neopop-react-native/primitives';

const SearchInputField = () => {
    const handleChange = (value) => {
        console.log('Search query: ', value);
    };
    const handleSubmit = () => {
        console.log('Search query submitted');
    };

    return (
        <SearchBar
            placeholder="search query here"
            colorConfig={colorGuide.lightComponents.searchBar}
            inputFieldColorConfig={colorGuide.lightComponents.inputFields}
            onSearchInput={handleChange}
            onSubmit={handleSubmit}
        />
    );
};

export default SearchInputField;
```

## Props

<ArgsTable of={SearchBar} />

**colorConfig** prop object support four color configurations for content namely `border`, `activeBorder`, `backgroundColor`, & `closeIcon`.

**inputFieldColorConfig** prop object support five color configurations for content namely `textColor`, `labelColor`, `caretColor`,`errorColor`, & `placeholderColor`.

**textStyle**

<div style={{ overflowX: 'auto' }}>

| prop          | description        | type                                       |
| ------------- | ------------------ | ------------------------------------------ |
| `fontType*`   | typography variant | `heading`, `caps`, `body`, `serif-heading` |
| `fontWeight*` | weight of the text | `800`, `700`, `600`, `500`, `400`, `300`   |
| `fontSize*`   | size of the text   | `string`                                   |

</div>

```js
const colorConfig = {
    border: mainColors.black,
    activeBorder: mainColors.green,
    backgroundColor: mainColors.white,
    closeIcon: colorPalette.popBlack[100],
};

const inputFieldColorConfig = {
    textColor: mainColors.black,
    labelColor: mainColors.blue,
    caretColor: mainColors.black,
    errorColor: mainColors.red,
    placeholderColor: colorPalette.popBlack[100],
};
```