import PropTypes from 'prop-types';
import React from 'react';
import { storiesOf } from '@storybook/react';
import { text } from '@storybook/addon-knobs';
import { Snippet, Hits } from 'react-instantsearch-dom';
import { WrapWithHits } from './util';

const stories = storiesOf('Snippet', module);

const Default = ({ hit }) => (
  <article>
    <p>
      <Snippet attribute="name" hit={hit} />
    </p>
    <p>
      <Snippet attribute="description" hit={hit} />
    </p>
  </article>
);

Default.propTypes = {
  hit: PropTypes.object.isRequired,
};

const StrongHits = ({ hit }) => (
  <article>
    <p>
      <Snippet
        attribute="name"
        tagName={text('tag name (title)', 'strong')}
        hit={hit}
      />
    </p>
    <p>
      <Snippet
        attribute="description"
        tagName={text('tag name (description)', 'strong')}
        hit={hit}
      />
    </p>
  </article>
);

StrongHits.propTypes = {
  hit: PropTypes.object.isRequired,
};

stories
  .add('default', () => (
    <WrapWithHits hasPlayground={true} linkedStoryGroup="Snippet">
      <Hits hitComponent={Default} />
    </WrapWithHits>
  ))
  .add('playground', () => (
    <WrapWithHits linkedStoryGroup="Snippet">
      <Hits hitComponent={StrongHits} />
    </WrapWithHits>
  ));

@@ -167,24 +167,35 @@
 nippet, Hits
+, Configure
  %7D from 'rea
@@ -1065,32 +1065,98 @@
 roup=%22Snippet%22%3E%0A
+      %3CConfigure attributesToSnippet=%7B%5B'name', 'description'%5D%7D /%3E%0A
       %3CHits hitC
@@ -1273,24 +1273,90 @@
 =%22Snippet%22%3E%0A
+      %3CConfigure attributesToSnippet=%7B%5B'name', 'description'%5D%7D /%3E%0A
       %3CHits 

use attributesToSnippet (#1606)