import * as React from 'react'
import InlineSVG from 'svg-inline-react'
import * as ReactTooltip from 'react-tooltip'

import CustomMeetingTypes from '../../CustomMeetingTypes'
import Loader from './Loader'
const calendar = require('!svg-inline-loader?removeTags=true&removeSVGTagAttrs=false!../../../../img/svg/calendar-toolbar.svg')
const caret = require('!svg-inline-loader?removeTags=true&removeSVGTagAttrs=false!../../../../img/svg/drop-up-arrow.svg')

import { ICalendarInjectionComponentProps } from './interfaces'

import './styles.styl'

interface IState {
  showPopup: boolean
}
class CalendarInjection extends React.Component<ICalendarInjectionComponentProps, IState> {
  node: HTMLDivElement
  constructor(props: ICalendarInjectionComponentProps) {
    super(props)
    this.state = { showPopup: false }
  }

  componentDidMount() {
    document.addEventListener('mousedown', this.handleClicks, false)
  }

  componentWillUnmount() {
    document.removeEventListener('mousedown', this.handleClicks, false)
  }

  handleClicks = (e: any) => {
    if (this.node && this.node.contains(e.target)) {
      return
    }
    this.setState({ showPopup: false })
  }

  calendarPopupClickHandler = () => {
    this.setState({
      showPopup: !this.state.showPopup,
    })
  }

  insertCalendar = (...args: any[]) => {
    this.setState({ showPopup: false })
    this.props.calendarOnClick.apply(this, args)
  }
  render() {
    const { recipientLength, trackingStatus, calendarInjectionLoading, userHasMeetingManagment, hasSalesCalendaring } = this.props
    const tooManyRecipients = recipientLength > 1
    const tooltipText = tooManyRecipients && !userHasMeetingManagment && !hasSalesCalendaring
      ? {
        defaultCalendar: `Drift Calendar is only available for emails with a single recipient`,
        customCalendar: `Drift Calendar is only available for emails with a single recipient`,
      }
      : {
        defaultCalendar: trackingStatus || userHasMeetingManagment || hasSalesCalendaring
          ? 'Insert your next available times from your Default Drift Meeting'
          : 'Drift Calendar requires tracking to be turned on',
        customCalendar: trackingStatus || userHasMeetingManagment || hasSalesCalendaring
          ? 'Insert upcoming availability from your Drift meeting types'
          : 'Drift Calendar requires tracking to be turned on',
      }
    return <div className="drift-email-extension-calendar">
      <div data-tip data-for="drift-default-meeting" className="drift-email-extension-default-meetings">
        <InlineSVG className="drift-email-extension-calendar-icon" src={calendar} />
        <div onClick={() => ((!tooManyRecipients && trackingStatus) || userHasMeetingManagment || hasSalesCalendaring) && this.props.calendarOnClick(null, this.props.defaultMeeting)}>{
          calendarInjectionLoading ? <Loader /> : 'Insert Default'
        }</div>
      </div>
      <ReactTooltip id="drift-default-meeting" effect="solid" className="drift-email-extension-tooltip">
        <span>{tooltipText.defaultCalendar}</span>
      </ReactTooltip>
      <InlineSVG
        data-tip data-for="drift-custom-meetings"
        className="drift-email-extension-custom-meeting-arrow"
        src={caret}
        onClick={() => {
          ReactTooltip.hide();
          ((!tooManyRecipients && trackingStatus) || userHasMeetingManagment || hasSalesCalendaring) && this.calendarPopupClickHandler()
        }} />
      <ReactTooltip id="drift-custom-meetings" effect="solid" className="drift-email-extension-tooltip">
        <span>{tooltipText.customCalendar}</span>
      </ReactTooltip>
      {this.state.showPopup && <div ref={node => this.node = node} className="drift-email-extension-calendar-popup"><CustomMeetingTypes onClick={this.insertCalendar} /></div>}
    </div>
  }
}
  

export default CalendarInjection