import React from 'react'
import List from './list'
import ToolTip from './../../src'

export default class Home extends React.Component {
  state = {
    isTooltipActive: false,
    placement: 'right',
    arrow: true
  }
  showTooltip() {
    this.setState({isTooltipActive: true})
  }
  hideTooltip() {
    this.setState({isTooltipActive: false})
  }
  handleOnChange() {
    let arrow = React.findDOMNode(this.refs.arrow).value === 'disable' ? null : React.findDOMNode(this.refs.arrow).value
    this.setState({
      placement: React.findDOMNode(this.refs.placement).value,
      arrow
    })
  }
  escape(html) {
    return document.createElement('div').appendChild(document.createTextNode(html)).parentNode.innerHTML
  }
  getBasicExample() {
    return {
      __html: this.escape(`<ToolTip active={true} parent="#parent" placement="right" arrow="center">
  ToolTip content here
</ToolTip>`)
    }
  }
  getArrowOptions() {
    let node = React.findDOMNode(this.refs.placement)
    let value = node ? node.value : 'right'
    let options = [
      <option value={null} key="arrow-null">disable</option>,
      <option value="center" key="arrow-center">center</option>
    ]

    if (value === 'top' || value === 'bottom') {
      options = options.concat([
        <option value="right" key="arrow-right">right</option>,
        <option value="left" key="arrow-left">left</option>
      ])
    }
    else {
      options = options.concat([
        <option value="top" key="arrow-top">top</option>,
        <option value="bottom" key="arrow-bottom">bottom</option>
      ])
    }

    return options
  }
  render() {
    return (
      <div className="row" style={{marginTop: 20}}>
        <div className="col-lg-12">
          <div className="row">
            <div className="col-lg-12">
              <div style={{marginBottom: 20}}>
                Basic tooltip usage:
                <pre dangerouslySetInnerHTML={this.getBasicExample()}/>
              </div>
              <div style={{marginBottom: 20}}>
                Result:
                <span className="btn btn-default" id="result" onMouseEnter={::this.showTooltip} onMouseLeave={::this.hideTooltip} style={{marginLeft: 10}}>Hover me!</span>
                <ToolTip active={this.state.isTooltipActive} parent="#result" placement="right" arrow="center" group="result">
                  Tooltip content here
                </ToolTip>
              </div>
            </div>
          </div>
          <div className="row">
            <div className="col-lg-3">
              <label htmlFor="placement-select" style={{marginRight: 10}}>Position:</label>
              <select id="placement-select" onChange={::this.handleOnChange} ref="placement" defaultValue="right">
                <option value="top">top</option>
                <option value="right">right</option>
                <option value="bottom">bottom</option>
                <option value="left">left</option>
              </select>
            </div>
            <div className="col-lg-3">
              <label htmlFor="arrow" style={{marginRight: 10}}>Arrow:</label>
              <select id="arrow" onChange={::this.handleOnChange} ref="arrow" defaultValue="center">
                {this.getArrowOptions()}
              </select>
            </div>
          </div>
          <div className="row">
            <h4 className="col-lg-12">Hover the usernames to display the tooltips</h4>
          </div>
          <List data={this.props.users.list.slice(0, 12)} placement={this.state.placement} arrow={this.state.arrow}/>
        </div>
      </div>
    )
  }
}

@@ -211,17 +211,96 @@
 ow: true
+,%0A    arrowOptions: null%0A  %7D%0A  componentDidMount() %7B%0A    this.getArrowOptions()
 %0A
-
   %7D%0A  sh
@@ -668,16 +668,38 @@
 ow%0A    %7D
+, this.getArrowOptions
 )%0A  %7D%0A  
@@ -1132,17 +1132,22 @@
     let 
-o
+arrowO
 ptions =
@@ -1173,14 +1173,16 @@
 lue=
-%7Bnull%7D
+%22center%22
  key
@@ -1193,21 +1193,22 @@
 row-
-null%22%3Edisable
+center%22%3Ecenter
 %3C/op
@@ -1230,32 +1230,30 @@
 ption value=
-%22center%22
+%7Bnull%7D
  key=%22arrow-
@@ -1248,38 +1248,37 @@
  key=%22arrow-
-center%22%3Ecenter
+null%22%3Edisable
 %3C/option%3E%0A  
@@ -1329,33 +1329,38 @@
 ottom') %7B%0A      
-o
+arrowO
 ptions = options
@@ -1344,33 +1344,38 @@
  arrowOptions = 
-o
+arrowO
 ptions.concat(%5B%0A
@@ -1530,17 +1530,22 @@
 %7B%0A      
-o
+arrowO
 ptions =
@@ -1545,17 +1545,22 @@
 tions = 
-o
+arrowO
 ptions.c
@@ -1715,22 +1715,37 @@
     
-return o
+this.setState(%7BarrowO
 ptions
+%7D)
 %0A  %7D
@@ -3366,28 +3366,31 @@
       %7Bthis.
-getA
+state.a
 rrowOptions(
@@ -3388,18 +3388,16 @@
 wOptions
-()
 %7D%0A      

Fix example warning