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

import { history } from 'site/store'
import actions from 'site/actions'

import "./home.css"

let clicked = false
let started = false

class Home extends Component {
  constructor(props) {
    super(props)
    this.ref = React.createRef()
    this.handleClick = this.handleClick.bind(this)
    this.state = {
      open: false,
      hidden: this.props.interactive,
      showCurtain: true,
    }
  }

  componentDidMount() {
    const roadblock = document.querySelector('.roadblock')
    if (roadblock) roadblock.style.display = "none"
    setTimeout(() => {
      this.setState({ showCurtain: false })
    }, 100)
  }

  handleClick(e) {
    e && e.preventDefault()
    actions.site.interact()

    this.index = 0
    const FLASH_TIME = 150
    const order = [
      ["home orange-text intro", FLASH_TIME],
      ["home white-text orange-bg", FLASH_TIME],
      ["home orange-text white-bg", FLASH_TIME],
      ["home white-text orange-bg", FLASH_TIME],
      ["home orange-text white-bg", FLASH_TIME],
      ["home white-text orange-bg", FLASH_TIME],
    ]

    const go = () => {
      clearTimeout(this.timeout)
      const item = order[this.index]
      if (item) {
        this.ref.current.className = item[0]
        this.index += 1
        this.timeout = setTimeout(go, item[1])
      } else {
        this.ref.current.className = "home orange-text intro hidden"
        clicked = true
      }
    }

    if (!clicked) {
      go()
    } else if (!started) {
      this.ref.current.className = "home orange-text black-bg open"
      setTimeout(() => {
        started = true
      }, 200)
    } else {
      this.ref.current.className = "home orange-text orange-bg open"
      setTimeout(() => {
        history.push("/thelastmuseum/stankievech-1")
      }, FLASH_TIME)
    }
  }

  render() {
    return (
      <div
        ref={this.ref}
        className="home orange-text intro"
        onClick={this.handleClick}
      >
        <div className="home-byline byline-top">KW PRESENTS</div>
        <div className="home-title title-1">THE L<span>AST</span></div>
        <div className="home-title title-2">MUSEUM</div>
        <div className="home-artists artists-left">
          NICOLE FORESHEW<br />
          JULIANA CERQUEIRA LEITE<br />
          NORA AL-BADRI
        </div>
        <div className="home-artists artists-right">
          CHARLES STANKIEVECH<br />
          JAKRAWAL NILTHAMRONG<br />
          ZOHRA OPOKU
        </div>
        <div className="home-byline byline-bottom">CURATED BY NADIM SAMMAN</div>
        <div className="home-message">
          The Last Museum hovers somewhere between life and death, lockdown and escape. Spanning six continents and too many screens, it is home to new muses - born of encounters between digital space and facts on the ground. It is web-site-specific. You are already here.
        </div>
        <div className={this.state.showCurtain ? "curtain" : "curtain hidden"} />
      </div>
    )
  }
}

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

export default connect(mapStateToProps)(Home)