import React from 'react';
import MultiSelect from 'wix-style-react/MultiSelect';
import styles from './ExampleStandard.scss';
import isstring from 'lodash.isstring';

const options = [
  {value: 'Alabama', id: 'Alabama', tag: {label: 'Alabama'}},
  {value: 'Alaska', id: 'Alaska'},
  {value: <div className={styles.option}><div>Arizona</div><div className={styles.thumb}/></div>, id: 'Arizona', tag: {label: 'Arizona', thumb: <div className={styles.thumb}/>}},
  {value: 'Arkansas', id: 'Arkansas', tag: {label: 'Arkansas'}},
  {value: 'Arkansas', id: 'Arkansas'},
  {value: 'California', id: 'California'},
  {value: 'California2', id: 'California2'},
  {value: 'California3', id: 'California3'},
  {value: 'California4', id: 'California4'},
  {value: 'California5', id: 'California5'},
  {value: 'California6', id: 'California6'},
  {value: 'California7', id: 'California7'},
  {value: 'Two words', id: 'Two words'}
];

class ExampleStandard extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      tags: [],
      options,
      inputValue: ''
    };
  }

  getValue = option => isstring(option.value) ? option.value : option.value.props.children[0].props.children;

  handleOnSelect = tag => this.setState({tags: [...this.state.tags, tag]});

  handleOnRemoveTag = tagId => this.setState({tags: this.state.tags.filter(currTag => currTag.id !== tagId)});

  handleOnChange = event => this.setState({inputValue: event.target.value});

  predicate = option => this.getValue(option).toLowerCase().includes(this.state.inputValue.toLowerCase());

  render() {
    return (
      <div className={styles.main}>
        <MultiSelect
          tags={this.state.tags}
          onSelect={this.handleOnSelect}
          onRemoveTag={this.handleOnRemoveTag}
          onChange={this.handleOnChange}
          onManuallyInput={() => console.log("NOW")}
          options={this.state.options}
          value={this.state.inputValue}
          predicate={this.predicate}
          />
      </div>
    );
  }
}

export default ExampleStandard;

@@ -1601,16 +1601,46 @@
 eturn (%0A
+      %3Cdiv className=%22ltr%22%3E%0A  
       %3Cd
@@ -1675,16 +1675,18 @@
         
+  
 %3CMultiSe
@@ -1696,24 +1696,26 @@
 t%0A          
+ 
+ 
 tags=%7Bthis.s
@@ -1725,16 +1725,18 @@
 e.tags%7D%0A
+  
         
@@ -1778,16 +1778,18 @@
         
+ 
+ 
 onRemove
@@ -1827,16 +1827,18 @@
         
+  
 onChange
@@ -1870,16 +1870,18 @@
         
+ 
+ 
 onManual
@@ -1921,24 +1921,26 @@
 %7D%0A          
+  
 options=%7Bthi
@@ -1966,16 +1966,18 @@
         
+ 
+ 
 value=%7Bt
@@ -2008,16 +2008,18 @@
         
+  
 predicat
@@ -2047,17 +2047,34 @@
         
+ 
-/
+ /%3E%0A        %3C/div
 %3E%0A      

fix storybook example