import * as React from 'react'
import PropTypes from 'prop-types'
import styled, { css } from 'styled-components'
import { font } from 'styled-theme'
import { prop, withProp, ifProp } from 'styled-tools'
import { color, isiOS } from '../../../utils/theme-utils'

const FormPlace = css`
  position: absolute;
  right: 0px;
  bottom: 20px;
`

const Wrapper = styled.div`
  position: relative;
  width: 40px;
  display: inline;
  ${ifProp('inInput', FormPlace, '')}
`

const QuestionIcon = styled.div`
  font-size: 26px;
  padding: 4px 16px;
  font-family: ${font('primary')};
  color: ${withProp('shade', shade => color(prop('palette', 'greyscale'), shade))};
  transition: all .2s ease-in-out;
  cursor: pointer;

  &:hover {
    color: ${color('greyscale', 800)};
  }
`
const TooltipBody = styled.div`
  position: absolute;
  box-sizing: border-box;
  font-family: ${font('primary')};
  background-color: ${color('greyscale', 800)};
  width: 281px;
  box-shadow: 0 3px 6px 0 ${color('greyscale', 900, 0.16)};
  line-height: 18px;
  text-align: left;
  padding: 15px;
  z-index: 1;
  left: -236px;
  top: 50px;
  border-radius: 4px;

  &:after {
    content: '';
    top: -9px;
    right: 14px;
    position: absolute;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid ${color('greyscale', 800)};
  }
`
function doNothing() {}
export class Tooltip extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      openedTooltip: false,
    }
    this.openTooltip = this.openTooltip.bind(this)
    this.closeTooltip = this.closeTooltip.bind(this)
    if (isiOS) {
      document.getElementById('app').addEventListener('click', doNothing)
    }
  }
  componentWillUnmount() {
    if (isiOS) {
      document.getElementById('app').removeEventListener('click', doNothing)
    }
  }

  openTooltip() {
    this.setState({ openedTooltip: true })
  }

  closeTooltip() {
    if (this.state.openedTooltip) {
      this.setState({
        openedTooltip: false,
      })
    }
  }

  render() {
    return (
      <Wrapper inInput={this.props.inInput}>
        <QuestionIcon
          shade={this.props.shade}
          palette={this.props.palette}
          onMouseOver={this.openTooltip}
          onFocus={this.openTooltip}
          onMouseLeave={this.closeTooltip}
          onBlur={this.closeTooltip}
        >?
        </QuestionIcon>
        {this.state.openedTooltip && (
          <TooltipBody>
            {this.props.children}
          </TooltipBody>
        )}
      </Wrapper>
    )
  }
}

Tooltip.propTypes = {
  children: PropTypes.node,
  inInput: PropTypes.bool,
  palette: PropTypes.string,
  shade: PropTypes.number,
}

Tooltip.defaultProps = {
  palette: 'greyscale',
  shade: 600,
  inInput: false,
}