import {
  Meta,
  Story,
  Preview,
  Title,
  Subtitle,
  Description,
  Props,
} from '@storybook/addon-docs/blocks';
import { withKnobs } from '@storybook/addon-knobs';
import { Box, ThemeProvider } from '@material-ui/core';

import MuiTheme from '../../../theme/mui';

import { Flex } from '../../Flex';
import { SearchInput } from '../';
import { BasicSearch } from './search.stories.js';

<Meta title='Material/Inputs' component={SearchInput} decorators={[withKnobs]}/>

<Title>Search Input</Title>

<Description>
  Input de busca misto dos aplicativos Eureca, extendido do `TextField` do `Material-UI`.
</Description>

<Preview>
  <Story name="Search Input">
    <BasicSearch />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| clickSearchOpportunity | Função disparada ao se buscar por oportunidade ou vaga <br /> func | - |
| clickSearchLocation | Função disparada ao se buscar por cidade <br /> func | - |
| helperText | Texto localizado na parte inferior do input do Material-UI <br /> string | - |
| error | Variável que controla estado de erro do componente <br /> bool | - |

<Subtitle>Exemplo de Aplicação</Subtitle>

```jsx
<SearchInput
  clickSearchLocation={handleSearchLocation}
  clickSearchOpportunity={handleSearchOpportunity}
/>
```