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

import actions from 'app/actions'
import { ROMAN_NUMERALS } from 'app/constants'
import { isMobile } from 'app/utils'
import { Arrow } from './viewer.icons'
import NavPlayer from './nav.player'
import { thumbnailURL, sectionProgressPercentage, sectionOffsetSeconds } from 'app/utils/annotation.utils'

class NavParent extends Component {
  state = {
    hoveringNext: false,
    hoveringNav: false,
    suppressHover: false,
  }
  constructor(props){
    super(props)
    this.navbarRef = React.createRef()
    this.handleMouseMove = this.handleMouseMove.bind(this)
    this.handleMouseEnter = this.handleMouseEnter.bind(this)
    this.handleMouseLeave = this.handleMouseLeave.bind(this)
    this.handleMouseEnterNext = this.handleMouseEnterNext.bind(this)
    this.handleMouseLeaveNext = this.handleMouseLeaveNext.bind(this)
    this.handleNavBarClick = this.handleNavBarClick.bind(this)
    this.handleSectionLinkClick = this.handleSectionLinkClick.bind(this)
    this.handleSectionLinkTextClick = this.handleSectionLinkTextClick.bind(this)
    this.goToNextSection = this.goToNextSection.bind(this)
  }
  handleMouseEnter(){
    // console.log('mouse enter')
    if (this.state.suppressHover) return
    this.setState({ hoveringNext: false, hoveringNav: true })
  }
  handleMouseEnterNext(){
    // console.log('mouse enter next', this.state.suppressHover)
    if (this.state.suppressHover) return
    this.setState({ hoveringNext: true, hoveringNav: false })
  }
  handleMouseLeave(){
    // console.log('mouse leave')
    this.setState({ hoveringNav: false })
    clearTimeout(this.timeout)
    this.timeout = setTimeout(() => {
      this.setState({ hoveringNext: false, suppressHover: false })
    }, 100)
  }
  handleMouseLeaveNext(){
    // console.log('mouse leave next')
    this.setState({ hoveringNext: false, suppressHover: true, })
    clearTimeout(this.timeout)
    this.timeout = setTimeout(() => {
      this.setState({ suppressHover: false })
    }, 100)
  }
  handleNavBarClick(e) {
    e && e.stopPropagation()
    if (isMobile) {
      actions.viewer.toggleComponent('nav')
    } else {
      // console.log('>> CLICK NAV')
      // actions.viewer.toggleComponent('nav')
      const percent = (e.pageX / this.navbarRef.current.offsetWidth)
      const seconds = sectionOffsetSeconds(this.props.currentSection, percent)
      console.log(e.pageX, this.navbarRef.current.offsetWidth, percent)
      console.log(this.props.currentSection)
      console.log(">>", seconds)
      actions.viewer.seekToTimestamp(seconds)
    }
  }
  handleSectionLinkClick(e) {
    e && e.stopPropagation()
    actions.viewer.toggleComponent('nav')
  }
  handleSectionLinkTextClick(e) {
    e && e.stopPropagation()
    actions.viewer.toggleComponent('nav')
  }
  handleMouseMove(e) {
    e && e.stopPropagation()
  }
  goToNextSection(e) {
    e && e.preventDefault()
    e && e.stopPropagation()
    const { viewer } = this.props
    // console.log('>> SEEK', viewer.nextSection)
    if (viewer.nextSection) {
      actions.viewer.seekToSection(viewer.nextSection)
    } else {
      actions.viewer.showNavComponent('credits')
      // actions.viewer.seekToBeginning()
    }
    this.setState({ hoveringNext: false, hoveringNav: false, suppressHover: true })
  }
  render() {
    const { viewer, currentSection, play_ts, started, playing } = this.props
    let containerClassName = "viewer-nav " + viewer.navStyle
    let navClassName = 'nav-row main-nav'
    if (this.state.hoveringNav || !started) containerClassName += ' hovering-nav'
    if ((this.state.hoveringNext || (viewer.atEndOfSection && !playing)) && !viewer.nav && viewer.nextSection) containerClassName += ' hovering-next'
    return (
      <div ref={this.navbarRef} className={containerClassName} onMouseMove={this.handleMouseMove} onMouseLeave={this.handleMouseLeave}>
        <div className={navClassName} onClick={this.handleNavBarClick}>
          <div className='nav-section-name' onMouseEnter={this.handleMouseEnter}>
            <span className="section-link link" onClick={this.handleSectionLinkTextClick}>
              <Arrow type={viewer.nav ? 'down' : 'up'} onClick={this.handleSectionLinkClick} />
              {currentSection && (
                viewer.mediaTitle
                ? <span><i>{viewer.mediaTitle}</i></span>
                : <span>
                    {ROMAN_NUMERALS[currentSection.index]}
                    {'. '}
                    {currentSection.title}
                  </span>
              )}
            </span>
          </div>
          <div className='nav-player-container' onMouseEnter={this.handleMouseEnter}>
            <NavPlayer />
          </div>
          <div
            className='nav-next'
            onMouseEnter={this.handleMouseEnter}
          >
            <span
              className="next-link link"
              onMouseEnter={this.handleMouseEnterNext}
              onClick={this.goToNextSection}
            >
              {viewer.nextSection
                ? "Next"
                : <span className="replay-link">{'Credits'}</span>
              }
              <Arrow type={'right'} />
            </span>
          </div>
          <div className="nav-progress-percentage" style={{
            width: currentSection ? sectionProgressPercentage(currentSection, play_ts) : 0
          }} />
        </div>
        {viewer.nextSection &&
          <div className="next-section-thumbnail"
            onClick={this.goToNextSection}
            style={{
              backgroundImage: (
                viewer.nextSection.media.length
                && 'url(' + thumbnailURL(viewer.nextSection.media[0].media) + ')'
              ),
            }}
          />
        }
      </div>
    )
  }
}

const mapStateToProps = state => ({
  viewer: state.viewer,
  currentSection: state.viewer.currentSection,
  started: state.audio.started,
  playing: state.audio.playing,
  play_ts: state.audio.play_ts,
})

export default connect(mapStateToProps)(NavParent)