import React, {Component} from 'react'
import auto_bind from 'common/auto_bind'
import {property_toggler} from 'common/utilities'
import {touch_enabled} from 'common/constants'

class Hover extends Component {
  constructor(props) {
    super(props)
    this.state = {
      hover: false,
    }
    auto_bind(this)
  }

  onMouseEnter() {
    this.setState({hover: true})
  }

  onMouseLeave() {
    this.setState({hover: false})
  }

  toggleHover() {
    this.setState(property_toggler('hover'))
  }

  render() {
    return (
      <div onClick={touch_enabled ? this.toggleHover : null} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
        {this.props.children(this.state.hover)}
      </div>
    )
  }
}

export default Hover