/**
 * Navigation for Petros Moris "Oracle"
 */

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

import './petros.nav.css'

import { history } from "site/store"
import { preloadImage } from 'app/utils'
import actions from 'app/actions'

const RESET_STATE = {
  textActive: false,
  textDone: false,
  ready: false,
}

const MOVEMENT = "movement"
const LOOP = "loop"

const INITIAL_VIEW = {
  1: MOVEMENT,
  2: LOOP,
  3: LOOP,
  4: MOVEMENT,
  5: MOVEMENT,
  6: MOVEMENT,
  7: LOOP,
}

const LOOP_TIMEOUT = 100
const MOVEMENT_TIMEOUT = 40000
const TEXT_LOAD_TIMEOUT = 15000

class PetrosNav extends Component {
  state = {
    ...RESET_STATE
  }

  constructor(props) {
    super(props)
    this.handleEnter = this.handleEnter.bind(this)
    this.handleLeave = this.handleLeave.bind(this)
    this.handleClickText = this.handleClickText.bind(this)
    this.navigate = this.navigate.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(prevProps.match && prevProps.match.params)
    }
  }

  load(lastParams) {
    const { page_name } = this.props.match.params
    const page_partz = page_name.split("-")
    const isPetros = page_partz[0] === 'petros'
    const index = parseInt(page_partz[1])

    if (!isPetros) {
      clearTimeout(this.readyTimeout)
      this.setState({
        ...RESET_STATE,
      })
      return      
    }
    preloadImage(`/thelastmuseum/static/media/last-museum/petros-moris/OracleTextButton${index}-White.png`)
    preloadImage(`/thelastmuseum/static/media/last-museum/petros-moris/OracleTextButton${index}.png`)
    preloadImage(`/thelastmuseum/static/media/last-museum/petros-moris/NavBW${index}.png`)
    preloadImage(`/thelastmuseum/static/media/last-museum/petros-moris/NavB${index}.png`)
    this.setState({
      ...RESET_STATE,
      index
    })
    this.readyTimeout = setTimeout(() => {
      this.setState({
        ready: true,
      })
    }, INITIAL_VIEW[index] === MOVEMENT ? MOVEMENT_TIMEOUT : LOOP_TIMEOUT)
  }

  handleEnter(event) {
    const side = event.target.className.split('-')
    this.setState({ hovering: side })
  }
  handleLeave(event) {
    this.setState({ hovering: false })
  }

  /** Start text generation sequence */
  handleClickText() {
    if (this.state.textActive) return
    this.setState({
      textActive: true,
      hovering: false
    })
    // Turn on the glyph
    actions.site.setPopups({
      ...this.props.popups,
      glyph: true,
    })
    // Fetch the subtitles
    this.textTimeout = setTimeout(() => {
      this.setState({
        textActive: false,
        textDone: true,
      })

      // Turn off the glyph
      actions.site.setPopups({
        ...this.props.popups,
        glyph: false,
      })
    }, TEXT_LOAD_TIMEOUT)
  }

  /** Navigate using the links at the bottom */
  navigate() {
    const { index, textActive } = this.state
    const leftIndex = Math.max(1, index - 1)
    const rightIndex = Math.min(7, index + 1)
    if (textActive) return
    const side = event.target.className.split('-')
    // if navigating to the left, just navigate.
    if (side === "left") {
      if (index !== leftIndex) {
        history.push(`/thelastmuseum/petros-${leftIndex}`)
      }
    } else if (side === "right") {
      // if this page starts with the loop, switch to movement
      // this will autoadvance when the video is done (set in tile settings)
      if (INITIAL_VIEW[index] === LOOP) {
        actions.site.setPopups({
          ...this.props.popups,
          movement: true,
        })
        this.setState({ ready: false, index })
      } else {
        // otherwise, just advance immediately.
        history.push(`/thelastmuseum/petros-${rightIndex}`)
      }
    }
  }

  render() {
    const { index, ready, hovering, textActive, textDone } = this.state
    if (!this.props.interactive || (!index)) return null
    const leftIndex = Math.max(1, index - 1)
    const rightIndex = Math.min(7, index + 1)
    return (
      <div>
        {ready && (
          <img
            className="petros-text"
            src={(hovering === "text" || textActive)
              ? `/thelastmuseum/static/media/last-museum/petros-moris/OracleTextButton${index}-White.png`
              : `/thelastmuseum/static/media/last-museum/petros-moris/OracleTextButton${index}.png`
            }
            style={{
              cursor: `url(/thelastmuseum/static/media/last-museum/petros-moris/OracleTextButton${index}-White.png)`
            }}
            onMouseEnter={this.handleEnter}
            onMouseLeave={this.handleLeave}
            onClick={this.handleClickText}
          />
        )}
        {ready && textDone && (
          <img
            className="petros-left"
            src={(hovering === "left" || textActive || index === leftIndex)
              ? `/thelastmuseum/static/media/last-museum/petros-moris/NavBW${leftIndex}.png`
              : `/thelastmuseum/static/media/last-museum/petros-moris/NavB${leftIndex}.png`
            }
            style={{
              cursor: `url(/thelastmuseum/static/media/last-museum/petros-moris/NavBW${leftIndex}-White.png), hand`
            }}
            onMouseEnter={this.handleEnter}
            onMouseLeave={this.handleLeave}
            onClick={this.navigate}
          />
        )}
        {ready && textDone && (
          <img
            className="petros-right"
            src={(hovering === "right" || textActive)
              ? `/thelastmuseum/static/media/last-museum/petros-moris/NavBW${rightIndex}.png`
              : `/thelastmuseum/static/media/last-museum/petros-moris/NavB${rightIndex}.png`
            }
            style={{
              cursor: `url(/thelastmuseum/static/media/last-museum/petros-moris/NavBW${rightIndex}-White.png), hand`
            }}
            onMouseEnter={this.handleEnter}
            onMouseLeave={this.handleLeave}
            onClick={this.navigate}
          />
        )}
      </div>
    )
  }
}

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

export default connect(mapStateToProps)(PetrosNav)