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

import OrgSelector from './index';
import OrgSelectorDocs from './OrgSelector.md';
import orgSelectorOptions from './OrgSelector.knobs.options';
import inputOptions from '../InputTextTypeAhead/InputTextTypeAhead.knobs.options';

storiesOf('forms|molecules/OrgSelector', module).addDecorator(withKnobs({ escapeHTML: false })).add('OrgSelector with SelectBox', function () {
  var props = {
    organizations: object('organizations', orgSelectorOptions.organizations, 'Organizations'),
    onChangeOrgCallback: action('OrgSelector onChangeOrgCallback')
  };
  var selected = inputOptions.options.orgSelector[0].text;
  var selectedList = inputOptions.options.orgSelector.map(function (option) {
    var opt = {};
    opt[option.text] = option.text;
    return opt;
  });
  props.selectBox = {
    label: text('label', 'State Organization'),
    stackLabel: boolean('stackLabel', true),
    id: text('id', 'state-organization'),
    options: object('options', inputOptions.options.orgSelector, 'Options'),
    selected: options('defaultSelected', Object.assign.apply(Object, [{}].concat(selectedList.values())), selected, { display: 'select' })
  };
  return React.createElement(OrgSelector, props);
}, { info: OrgSelectorDocs }).add('OrgSelector with TypeAhead', function () {
  var props = {
    organizations: object('organizations', orgSelectorOptions.organizations, 'Organizations'),
    onChangeOrgCallback: action('OrgSelector onChangeOrgCallback')
  };
  var selectedList = inputOptions.options.orgSelector.map(function (option) {
    var opt = {};
    opt[option.text] = option.text;
    return opt;
  });
  props.typeAhead = {
    label: text('label', 'State Organization'),
    id: text('id', 'state-organization'),
    options: object('options', inputOptions.options.orgSelector, 'Options'),
    selected: options('defaultSelected', Object.assign.apply(Object, [{}].concat(selectedList.values())), '', { display: 'select' }),
    placeholder: text('placeholder', 'All Organizations')
  };

  return React.createElement(OrgSelector, props);
}, { info: OrgSelectorDocs });