import React, { Component } from 'react'

import actions from 'site/actions'

import "./home.css"

export default class Home extends Component {
  state = {
    open: false,
  }

  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }

  componentDidMount() {
    const roadblock = document.querySelector('.roadblock')
    if (roadblock) roadblock.style.display = "none"
  }

  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 OPOKO
        </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>
    )
  }
}