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,
  }
  constructor(props) {
    super(props)
    this.handleToggle = this.handleToggle.bind(this)
    this.handleClose = this.handleClose.bind(this)
  }
  handleMouseEnter(category) {
    this.setState({ [category]: true })
  }
  handleMouseLeave(category) {
    this.setState({ [category]: false })
  }
  handleToggle() {
    if (this.props.playing) {
      actions.audio.pause()
    } else {
      actions.viewer.playFromClick()
    }
  }
  handleClose() {
    if (this.props.videoModalOpen) {
      actions.viewer.closeVideoModal()
    } else {
      actions.viewer.toggleFullscreenVisible(false)
      actions.audio.pause()
    }
    this.handleMouseLeave('close')
    this.handleMouseLeave('eflux')
  }
  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,
      videoModalOpen
    } = this.props
    let className = "eflux-header"
    if (navStyle) className += ' ' + navStyle
    if (navGradient) className += ' gradient'
    if (transcriptOpen) className += ' transcript-open'
    if (isFullscreen) className += ' is-fullscreen'
    // console.log(isFullscreen, fullscreenVisible, isFullscreenSingleton)
    const fullscreenWantsCloseButton = (isFullscreen && fullscreenVisible && !isFullscreenSingleton) || videoModalOpen
    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()}
          {!videoModalOpen && (
            <span
              onMouseEnter={() => this.handleMouseEnter('play')}
              onMouseLeave={() => this.handleMouseLeave('play')}
            >
              <PlayButton playing={playing} onClick={this.handleToggle} />
            </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"
        }>
          {videoModalOpen ? 'Close video' : 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() {
    const { videoModalOpen } = this.props
    return (
      <div
        className="fullscreen-close"
        onMouseEnter={() => this.handleMouseEnter(videoModalOpen ? 'play' : 'close')}
        onMouseLeave={() => this.handleMouseLeave(videoModalOpen ? 'play' : 'close')}
        onClick={this.handleClose}
      >
        {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,
  isFullscreenSingleton: state.viewer.isFullscreenSingleton,
  videoModalOpen: state.viewer.videoModal.open,
})

export default connect(mapStateToProps)(EfluxChrome)