import React from 'react'
import PropTypes from 'prop-types'
import tooltip from './tooltip.css'

class Tooltip extends React.Component {
  constructor () {
    super()
  }

  render () {
    let tooltipClasses = tooltip.tooltipContainer
    if (!this.props.showed) {
      tooltipClasses += ' ' + tooltip.hidden
    }
    let placement = tooltip.top
    if (this.props.tooltipPlacement && tooltip[this.props.tooltipPlacement]) {
      placement = tooltip[this.props.tooltipPlacement]
    }
    tooltipClasses += ' ' + placement
    let tooltipStyle = {}
    if (this.props.tooltipStyle) {
      tooltipStyle = this.props.tooltipStyle
    }
    let onClickFn = () => {}
    if (this.props.onTooltipClick) {
      onClickFn = this.props.onTooltipClick.bind(this)
      tooltipStyle.pointerEvents = 'all'
    }
    return (
      <div
        className={tooltip.container}
        {...this.props.tooltipProps}>
        {this.props.children}
        <div className={tooltipClasses} style={tooltipStyle} onClick={onClickFn}>
          <div className={tooltip.tooltipContent + ' ' + this.props.tooltipClassName}>
            {this.props.content}
          </div>
        </div>
      </div>
    )
  }
}

Tooltip.propTypes = {
  showed: PropTypes.bool,
  content: PropTypes.any,
  tooltipProps: PropTypes.object,
  tooltipClassName: PropTypes.string,
  tooltipStyle: PropTypes.object,
  tooltipPlacement: PropTypes.string,
  onTooltipClick: PropTypes.func,
  children: PropTypes.any
}

export default Tooltip