// @flow
import React, { useState, useCallback } from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { configDocs } from '../../../../.storybook/config-docs';
import docs from './SEARCH_INPUT_FIELD.mkd';
import { Grid, GridItem } from '../../structures';
import { SearchInputField } from '.';

const SearchInputFieldDemo = ({
  value,
  large = false,
  bold = false,
  hideLabel = false,
  focusOnMount = false,
}: {|
  value?: string,
  large?: boolean,
  bold?: boolean,
  hideLabel?: boolean,
  focusOnMount?: boolean,
|}) => {
  const [newValue, setValue] = useState(value || '');
  const onChange = useCallback((valueNeedToChange) => {
    setValue(valueNeedToChange);
  }, []);

  return (
    <Grid>
      <GridItem sm={12} md={6} lg={4}>
        <SearchInputField
          value={newValue}
          bold={bold}
          onChange={onChange}
          placeholder="Some placeholder"
          large={large}
          label="Search Input"
          hideLabel={hideLabel}
          focusOnMount={focusOnMount}
        />
      </GridItem>
    </Grid>
  );
};

storiesOf('Core/Forms/SearchInputField', module)
  .addDecorator(withInfo(configDocs(docs, SearchInputField)))

  .add('normal', () => <SearchInputFieldDemo />)
  .add('bold', () => <SearchInputFieldDemo bold />)
  .add('large', () => <SearchInputFieldDemo large />)
  .add('default value', () => (
    <SearchInputFieldDemo large value="Some preset" />
  ))
  .add('no label', () => <SearchInputFieldDemo large hideLabel />)
  .add('focused on mount', () => <SearchInputFieldDemo large focusOnMount />);
