import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs, text, object, select, boolean, array } from '@storybook/addon-knobs';
import { action } from '@storybook/addon-actions';

import InputTextFuzzy from './index';
import InputTextFuzzyDocs from './InputTextFuzzy.md';
import inputOptions from './InputTextFuzzy.knobs.options';

storiesOf('forms|atoms', module).addDecorator(withKnobs({ escapeHTML: false })).add('InputTextFuzzy', function () {
  var props = {
    boxed: boolean('boxed', false),
    disabled: boolean('disabled', false),
    label: text('label', 'State Organization'),
    keys: array('keys', ['text']),
    options: inputOptions.options.orgSelector.filter(function (option) {
      return option.text !== '';
    }),
    placeholder: text('placeholder', 'All Organizations'),
    id: text('id', 'org-typeahead'),
    inputId: text('inputId', 'input-org-typeahead'),
    selected: select('selected', inputOptions.options.orgSelector.map(function (option) {
      return option.text;
    }), ''),
    fuseOptions: object('fuseOptions', {
      shouldSort: true,
      findAllMatches: true,
      includeMatches: true,
      threshold: 0.3,
      minMatchCharLength: 1,
      maxPatternLength: 300
    }),
    onKeyDown: action('onKeyDown event'),
    onKeyUp: action('onKeyUp event'),
    onChange: action('onChange event'),
    onFocus: action('onFocus event'),
    onBlur: action('onBlur event'),
    onSuggestionClick: action('onSuggestionClick called'),
    renderDefaultSuggestion: boolean('fuzzy renderDefaultSuggestion', true)
  };
  return React.createElement(InputTextFuzzy, props);
}, { info: InputTextFuzzyDocs });