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

import actions from 'site/actions'

import "./home.css"

class Home extends Component {
  constructor(props) {
    super(props)
    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()
    if (this.state.open) {
      actions.site.interact()
      this.setState({ hidden: true })
    }
    else {
      this.setState({ open: true })
    }
  }

  render() {
    return (
      <div className={this.state.hidden ? "home hidden open" : this.state.open ? "home open" : "home"} 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">
          Lorem ipsum dolor sit amet, pro ea errem nonumes, gubergren deterruisset sit eu. Quo nostrud definitiones ex, sea dicant accommodare ei, te vix habeo minim voluptatum.
        </div>
        <div className={this.state.showCurtain ? "curtain" : "curtain hidden"} />
      </div>
    )
  }
}

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

export default connect(mapStateToProps)(Home)