import React from 'react'
import ReactDOM from 'react-dom'
import List from './list'
import ToolTip from './../../src'

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

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

    this.setState({arrowOptions})
  }
  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" position="right" arrow="center" group="result">
                  Tooltip content here
                </ToolTip>
              </div>
            </div>
          </div>
          <div className="row">
            <div className="col-lg-3">
              <label htmlFor="position-select" style={{marginRight: 10}}>Position:</label>
              <select id="position-select" onChange={::this.handleOnChange} ref="position" 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.state.arrowOptions}
              </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)} position={this.state.position} arrow={this.state.arrow}/>
        </div>
      </div>
    )
  }
}

@@ -23,41 +23,8 @@
 ct'%0A
-import ReactDOM from 'react-dom'%0A
 impo
@@ -462,37 +462,16 @@
 arrow = 
-ReactDOM.findDOMNode(
 this.ref
@@ -473,25 +473,24 @@
 s.refs.arrow
-)
 .value === '
@@ -507,37 +507,16 @@
  null : 
-ReactDOM.findDOMNode(
 this.ref
@@ -522,17 +522,16 @@
 fs.arrow
-)
 .value%0A 
@@ -560,39 +560,17 @@
    p
-lacement: ReactDOM.findDOMNode(
+osition: 
 this
@@ -576,25 +576,23 @@
 s.refs.p
-lacement)
+osition
 .value,%0A
@@ -984,29 +984,8 @@
 e = 
-ReactDOM.findDOMNode(
 this
@@ -995,17 +995,15 @@
 fs.p
-lacement)
+osition
 %0A   

Fix example