/**
 * Start page interaction
 */

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/egill-intro");
      }, 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">
          <div>CHARLES STANKIEVECH</div>
          <div>NORA AL-BADRI</div>
          <div>JULIANA CERQUEIRA LEITE</div>
          <div>ZOHRA OPOKU</div>
          <div>NICOLE FORESHEW</div>
          <div>PETROS MORIS</div>
          <div>JAKRAWAL NILTHAMRONG</div>
        </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);