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

import { SUBTITLES } from '../subtitles.js'

import './titles.css'

import { history } from "site/store"

const HEADPHONES_SHOW_DELAY = 500
const HEADPHONES_HIDE_DELAY = 3000
const TITLE_SHOW_DELAY = 1000
const TITLE_HIDE_DELAY = 6000
const FIRST_SUBTITLE_DELAY = 3000
const SUBTITLE_DELAY = 3500
const LAST_SUBTITLE_DELAY = 5000

class TitlesOverlay extends Component {
  state = {
    content: null,
    showText: false,
    showVideo: false,
  }

  constructor(props) {
    super(props)
    this.titleRef = React.createRef()
    this.headphonesRef = React.createRef()
    this.textRef = React.createRef()
    this.showTitle = this.showTitle.bind(this)
    this.showHeadphones = this.showHeadphones.bind(this)
    this.advance = this.advance.bind(this)
  }

  componentDidMount() {
    if (this.props.interactive) {
      this.load()
    }
  }

  componentDidUpdate(prevProps) {
    if (
      (this.props.interactive && this.props.interactive !== prevProps.interactive)
      || this.props.location.pathname !== prevProps.location.pathname
    ) {
      this.load()
    }
    if (
      this.props.popups !== prevProps.popups
      && this.state.content
      && this.state.content.popup
    ) {
      if (this.props.popups[this.state.content.popup]) {
        this.setState({ showVideo: true })
      } else if (this.state.showVideo) {
        this.setState({ showText: true })
        this.startHeartbeat()
      }
    }
  }

  load() {
    const { page_name } = this.props.match.params
    clearTimeout(this.titleTimeout)
    this.props.audio.player.stop("text-overlay")
    if (SUBTITLES[page_name]) {
      this.setState({
        content: SUBTITLES[page_name],
        showText: false,
        showVideo: false,
      })
      setTimeout(SUBTITLES[page_name].headphones ? this.showHeadphones : this.showTitle, 0)
    } else {
      this.setState({
        content: null,
        showText: false,
        showVideo: false,
      })
    }
  }

  startHeartbeat() {
    if (this.state.content.audio_url) {
      this.props.audio.player.stop("text-overlay")
      this.props.audio.player.playURL({
        id: "text-overlay",
        url: this.state.content.audio_url,
      })
    }
  }

  showHeadphones() {
    if (!this.headphonesRef.current) return
    this.titleTimeout = setTimeout(() => {
      this.headphonesRef.current.style.opacity = 1
      this.titleTimeout = setTimeout(() => {
        this.headphonesRef.current.style.opacity = 0
        setTimeout(this.showTitle, TITLE_SHOW_DELAY)
      }, HEADPHONES_HIDE_DELAY)
    }, HEADPHONES_SHOW_DELAY)
  }

  showTitle() {
    if (!this.titleRef.current) return
    this.titleRef.current.style.color = this.state.content.color || "rgba(255, 121, 13, 1.0)"
    this.titleRef.current.style.opacity = 0
    this.titleTimeout = setTimeout(() => {
      this.titleRef.current.innerHTML = this.state.content.title
      this.titleRef.current.style.opacity = 1
      this.titleTimeout = setTimeout(() => {
        this.titleRef.current.style.opacity = 0
      }, TITLE_HIDE_DELAY)
    }, TITLE_SHOW_DELAY)
  }

  advance(){
    if (this.advancing === this.state.content.next) return
    this.advancing = this.state.content.next
    this.textRef.current.classList.remove("visible")
    Array.from(document.querySelectorAll("video")).forEach(video => {
      video.style.transition = "opacity 0.5s"
    })
    setTimeout(() => {
      Array.from(document.querySelectorAll("video")).forEach(video => {
        video.style.opacity = 0
      })
    }, 500)
    setTimeout(() => {
      history.push(`/last-museum/${this.state.content.next}/`)
    }, 1000)
  }

  render() {
    const { content, showText } = this.state
    const { popups, interactive } = this.props
    if (!interactive || !content) return null
    return (
      <div>
        <div
          ref={this.headphonesRef}
          className="chapter-headphones"
        >
          {"Headphones recommended"}
        </div>
        <div
          ref={this.titleRef}
          className="chapter-title"
        >
          {this.state.content.title}
        </div>
        <div
          ref={this.textRef}
          className={showText ? "charles-text visible" : "charles-text"}
          style={{
            cursor: `url(${this.state.content.cursor}) 50 50, pointer`
          }}
          onClick={this.advance}
        >
          {showText && (
            <span>
              {this.state.content.text}
              <br/><br/>
              <div className="charles-credit">{this.state.content.credit}</div>
            </span>
          )}
        </div>
      </div>
    )
  }
}

const mapStateToProps = state => ({
  audio: state.audio,
  popups: state.site.popups,
  interactive: state.site.interactive,
})

export default connect(mapStateToProps)(TitlesOverlay)