/**
 * Links on Jakrawal's site are added programmatically for "lateral" navigation
 */

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

import './jakrawal.links.css'

import { history } from "site/store"

const RESET_STATE = {
  left: null,
  right: null,
  vertical: false,
  curtain: false,
  lateralLink: null,
  verticalLink: null,
  hovering: false,
}

const VERTICAL_TIMEOUT = 10000
const AUTOADVANCE_TIMEOUT = 40000

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

  constructor(props) {
    super(props)
    this.goLateral = this.goLateral.bind(this)
    this.goVertical = this.goVertical.bind(this)
    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 isJakrawal = page_partz[0] === 'nilthamrong'

    if (!isJakrawal || page_partz[1] === 'home') {
      clearTimeout(this.autoadvanceTimeout)
      clearTimeout(this.timeout)
      this.setState({
        ...RESET_STATE,
      })
      return      
    }
    if (page_partz[1] === 'a9') {
      clearTimeout(this.autoadvanceTimeout)
      clearTimeout(this.timeout)
      this.autoadvanceTimeout = setTimeout(this.goVertical, AUTOADVANCE_TIMEOUT)
      this.setState({
        ...RESET_STATE,
        curtain: true,
        verticalLink: "home",
      })
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        this.setState({ vertical: true })
      }, VERTICAL_TIMEOUT)
      return
    }
    const partz = page_partz[1].split("")
    const isOnA = partz[0] === 'a';
    const lateralLink = (isOnA ? 'b' : 'a') + partz[1]
    const verticalLink = lateralLink === 'a8' ? "home" : partz[0] + (parseInt(partz[1]) + 1)
    this.setState({
      left: !isOnA,
      right: isOnA,
      lateralLink,
      verticalLink,
      curtain: true,
      hovering: false,
    })
    if (!lastParams || lastParams.page_name !== ('nilthamrong-' + lateralLink)) {
      clearTimeout(this.autoadvanceTimeout)
      this.autoadvanceTimeout = setTimeout(this.goVertical, AUTOADVANCE_TIMEOUT)
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        this.setState({ vertical: true })
      }, VERTICAL_TIMEOUT)
    }
  }

  handleEnter() {
    this.setState({ hovering: true })
  }
  handleLeave() {
    this.setState({ hovering: false })
  }
  goLateral() {
    history.push(`/thelastmuseum/nilthamrong-${this.state.lateralLink}`)
  }
  goVertical() {
    this.setState({ vertical: false })
    if (this.state.verticalLink === 'home') {
      history.push(`/thelastmuseum/home`)
    } else {
      history.push(`/thelastmuseum/nilthamrong-${this.state.verticalLink}`)
    }
  }

  render() {
    const { left, right, vertical, curtain } = this.state
    if (!this.props.interactive || (!left && !right && !vertical && !curtain)) return null
    return (
      <div>
        <div className="jakrawal-curtain" />
        {vertical && <div className="jakrawal-full" onClick={this.goVertical} />}
        {left && <div className="jakrawal-left" onClick={this.goLateral} />}
        {right && <div className="jakrawal-right" onClick={this.goLateral} />}
      </div>
    )
  }
}

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

export default connect(mapStateToProps)(JakrawalLinks)