
import React from 'react'
import classnames from 'classnames'
import {Chip} from '../../../'

export default class ChipRoute extends React.Component {

  state = {
    // values is an array of strings
    values: [],
    focused: false
  }

  onDelete = () => {
    console.log('on delete')
  }

  onChange = (values) => {
    this.setState({values})
  }

  onFocus = () => {
    this.setState({
      focused: true
    })
  }

  onBlur = () => {
    this.setState({
      focused: false
    })
  }

  render () {
    return (
      <div>
        <section>
          <h2>Chip</h2>
          <div
            className={classnames('Chip-example1', {
              'is-focused': this.state.focused
            })}
          >
            <Chip onChange={this.onChange} onFocus={this.onFocus} onBlur={this.onBlur} />
          </div>
          {this.state.values.length ? <p>Values</p> : null}
          <ul>
            {this.state.values.map((s, i) => <li key={i}>{s}</li>)}
          </ul>
        </section>
        <section>
          <h2>Chip with initial values</h2>
          <div
            className={classnames('Chip-example1', {
              'is-focused': this.state.focused
            })}
          >
            <Chip onChange={this.onChange} onFocus={this.onFocus} onBlur={this.onBlur} initialValues={['github', 'stackoverflow']}/>
          </div>
          {this.state.values.length ? <p>Values</p> : null}
          <ul>
            {this.state.values.map((s, i) => <li key={i}>{s}</li>)}
          </ul>
        </section>
      </div>
    )
  }

}
// <section>
//   <h2>Chip with delete</h2>
//   <Chip onDelete={this.onDelete} />
// </section>
// <section>
//   <h2>Chip with icon</h2>
//   <Chip icon='A' />
// </section>
// <section>
//   <h2>Chip with delete and icon</h2>
//   <Chip icon='A' onDelete={this.onDelete} />
// </section>

@@ -215,32 +215,65 @@
 %5B%5D,%0A    focused:
+ false,%0A%09valuesIV: %5B%5D,%0A%09focuseIV:
  false%0A  %7D%0A%0A  on
@@ -527,16 +527,234 @@
 %7D)%0A  %7D%0A%0A
+  onChangeIV = (valuesIV) =%3E %7B%0A    this.setState(%7BvaluesIV%7D)%0A  %7D%0A%0A  onFocusIV = () =%3E %7B%0A    this.setState(%7B%0A      focusedIV: true%0A    %7D)%0A  %7D%0A%0A  onBlurIV = () =%3E %7B%0A    this.setState(%7B%0A      focusedIV: false%0A    %7D)%0A  %7D%0A%0A
   render
@@ -1422,32 +1422,34 @@
 is.state.focused
+IV
 %0A            %7D)%7D
@@ -1494,32 +1494,34 @@
 e=%7Bthis.onChange
+IV
 %7D onFocus=%7Bthis.
@@ -1519,32 +1519,34 @@
 us=%7Bthis.onFocus
+IV
 %7D onBlur=%7Bthis.o
@@ -1550,16 +1550,18 @@
 s.onBlur
+IV
 %7D initia
@@ -1637,32 +1637,34 @@
 his.state.values
+IV
 .length ? %3Cp%3EVal
@@ -1716,32 +1716,34 @@
 his.state.values
+IV
 .map((s, i) =%3E %3C

fix chip example contexts