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'
import { isHandheld } from 'app/utils'

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,
        })
      }
    }
    else if (prevProps.atEndOfSection !== this.props.atEndOfSection && this.props.atEndOfSection) {
      // reached end of section
      if (this.props.currentSection.index === 0) {
        this.setState({ transcript: true })
      }
    }
  }
  render() {
    const {
      navStyle, navGradient,
      playing, transcriptOpen,
      isFullscreen, fullscreenVisible, isFullscreenSingleton,
      growlOpen, growlMessage,
      atEndOfSection, currentSection
    } = this.props
    let className = "eflux-header"
    if (navStyle) className += ' ' + navStyle
    if (navGradient) className += ' gradient'
    if (transcriptOpen) className += ' transcript-open'
    if (isFullscreen) className += ' is-fullscreen'
    const fullscreenWantsCloseButton = isFullscreen && fullscreenVisible && !isFullscreenSingleton
    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>
        {fullscreenWantsCloseButton && isHandheld && this.renderCloseButton()}
        <div className="eflux-nav">
          {fullscreenWantsCloseButton && !isHandheld && this.renderCloseButton()}
          <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={
          (!this.state.transcript && this.state.play)
          ? "growl-tooltip tooltip-play hover"
          : "growl-tooltip tooltip-play"
        }>
          {this.state.playMessage}
        </div>
        <div className={
            this.state.transcript
            ? "growl-tooltip tooltip-transcript hover"
            : "growl-tooltip tooltip-transcript"
          }
          onClick={() => actions.viewer.toggleComponent('transcript')}
        >
          {'Read the Transcript'}
        </div>
      </div>
    )
  }
  renderCloseButton() {
    return (
      <div
        className="fullscreen-close"
        onMouseEnter={() => this.handleMouseEnter('close')}
        onMouseLeave={() => this.handleMouseLeave('close')}
        onClick={() => {
          actions.viewer.toggleFullscreenVisible(false)
          this.handleMouseLeave('close')
        }}
      >
        {EfluxClose}
      </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,
  fullscreenVisible: state.viewer.fullscreenVisible,
})

export default connect(mapStateToProps)(EfluxChrome)