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,
    close: 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, navGradient,
      playing, transcriptOpen, isFullscreen,
      growlOpen, growlMessage,
      atEndOfSection, currentSection
    } = this.props
    const showingTranscriptTooltip = ((atEndOfSection && currentSection.index === 0) || this.state.transcript)
    let className = "eflux-header"
    if (navStyle) className += ' ' + navStyle
    if (navGradient) className += ' gradient'
    if (transcriptOpen) className += ' transcript-open'
    return (
      <div className={className}>
        <div className="eflux-gradient" />
        <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">
          {isFullscreen &&
            <div
              className="fullscreen-close"
              onMouseEnter={() => this.handleMouseEnter('close')}
              onMouseLeave={() => this.handleMouseLeave('close')}
            >
              {EfluxClose}
            </div>
          }
          <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.close
          ? "growl-tooltip tooltip-close hover"
          : "growl-tooltip tooltip-close"
        }>
          {'Close fullscreen player'}
        </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,
  navGradient: state.viewer.navGradient,
  playing: state.audio.playing,
  transcriptOpen: state.viewer.transcript,
  growlOpen: state.viewer.growlOpen,
  growlMessage: state.viewer.growlMessage,
  atEndOfSection: state.viewer.atEndOfSection,
  currentSection: state.viewer.currentSection,
  isFullscreen: state.viewer.isFullscreen,
})

export default connect(mapStateToProps)(EfluxChrome)