/**
 * 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'

const RESET_STATE = {
}

const LOADING_TIMEOUT = 15000
const ADVANCE_TIMEOUT = 40000

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

  constructor(props) {
    super(props)
    this.handleEnter = this.handleEnter.bind(this)
    this.handleLeave = this.handleLeave.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.autoadvanceTimeout)
      clearTimeout(this.timeout)
      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
    })
  }

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

  }
  navigate() {
    // history.push(`/thelastmuseum/nilthamrong-${this.state.lateralLink}`)
  }

  render() {
    const { index } = this.state
    if (!this.props.interactive || (!index)) return null
    return (
      <div>
        <img className="petros-text" onMouseEnter={this.handleEnter} onMouseLeave={this.handleLeave} onClick={this.handleClickText} />
        <img className="petros-left" onMouseEnter={this.handleEnter} onMouseLeave={this.handleLeave} onClick={this.navigate} />
        <img className="petros-right" 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)