import React, { Component } from 'react'
import { connect } from 'react-redux'

import {
  EfluxLogo, EfluxClose, TranscriptIcon
} from './eflux.icons'
import { PlayButton } from './viewer.icons'
import actions from 'app/actions'
import { URLS } from 'app/constants'

const PLAY_MESSAGES = {
  not_started: 'Start the Exhibition',
  playing: 'Pause',
  paused: 'Resume',
}

class EfluxChrome extends Component {
  state = {
    eflux: false,
    play: false,
    transcript: false,
    started: false,
    playMessage: PLAY_MESSAGES.not_started,
  }
  handleMouseEnter(category) {
    this.setState({ [category]: true })
  }
  handleMouseLeave(category) {
    this.setState({ [category]: false })
  }
  componentDidUpdate(prevProps) {
    if (this.props.playing !== prevProps.playing) {
      if (!this.state.started) {
        this.setState({
          started: true,
          play: false,
        })
        setTimeout(() => {
          this.setState({
            playMessage: this.props.playing ? PLAY_MESSAGES.playing : PLAY_MESSAGES.paused,
          })
        }, 150)
      } else {
        this.setState({
          playMessage: this.props.playing ? PLAY_MESSAGES.playing : PLAY_MESSAGES.paused,
        })
      }
    }
  }
  render() {
    const { navStyle, playing, transcriptOpen, growlOpen, growlMessage, atEndOfSection, currentSection } = this.props
    const showingTranscriptTooltip = ((atEndOfSection && currentSection.index === 0) || this.state.transcript)
    return (
      <div className={"eflux-header " + navStyle + (transcriptOpen ? ' transcript-open' : '')}>
        <div className="eflux-logo">
          <a
            href={URLS.eflux_logo}
            onMouseEnter={() => this.handleMouseEnter('eflux')}
            onMouseLeave={() => this.handleMouseLeave('eflux')}
          >
            {EfluxLogo}
          </a>
        </div>
        <div className={growlOpen ? "growl-tooltip growl-message open" : "growl-tooltip growl-message"}>
          {growlMessage}
        </div>
        <div className="eflux-nav">
          <span
            onMouseEnter={() => this.handleMouseEnter('play')}
            onMouseLeave={() => this.handleMouseLeave('play')}
          >
            <PlayButton playing={playing} />
          </span>
          <div
            className="transcript-icon"
            onMouseEnter={() => this.handleMouseEnter('transcript')}
            onMouseLeave={() => this.handleMouseLeave('transcript')}
            onClick={() => actions.viewer.toggleComponent('transcript')}
          >
            {TranscriptIcon}
          </div>
        </div>
        <div className={this.state.eflux ? "growl-tooltip tooltip-eflux hover" : "growl-tooltip tooltip-eflux"}>
          {'Back to e-flux'}
        </div>
        <div className={(!showingTranscriptTooltip && this.state.play) ? "growl-tooltip tooltip-play hover" : "growl-tooltip tooltip-play"}>
          {this.state.playMessage}
        </div>
        <div
          className={showingTranscriptTooltip ? "growl-tooltip tooltip-transcript hover" : "growl-tooltip tooltip-transcript"}
          onClick={() => actions.viewer.toggleComponent('transcript')}
        >
          {'Read the Transcript'}
        </div>
      </div>
    )
  }
}

const mapStateToProps = state => ({
  navStyle: state.viewer.navStyle,
  playing: state.audio.playing,
  transcriptOpen: state.viewer.transcript,
  growlOpen: state.viewer.growlOpen,
  growlMessage: state.viewer.growlMessage,
  atEndOfSection: state.viewer.atEndOfSection,
  currentSection: state.viewer.currentSection,
})

export default connect(mapStateToProps)(EfluxChrome)