// @flow
import React, { useState, useCallback } from 'react';
import { storiesOf } from '@storybook/react';
import { withDocs } from '../../../../.storybook/with-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,
}: {
  value?: string,
  large?: boolean,
  bold?: boolean,
  hideLabel?: 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}
        />
      </GridItem>
    </Grid>
  );
};

storiesOf('Core/Forms/SearchInputField', module)
  .add('normal', withDocs(docs)(() => <SearchInputFieldDemo />))
  .add('bold', withDocs(docs)(() => <SearchInputFieldDemo bold />))
  .add('large', withDocs(docs)(() => <SearchInputFieldDemo large />))
  .add(
    'default value',
    withDocs(docs)(() => <SearchInputFieldDemo large value="Some preset" />),
  )
  .add(
    'no label',
    withDocs(docs)(() => <SearchInputFieldDemo large hideLabel />),
  );
