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

import "./artists.css"
import "./essay.css"

import { ARTISTS, ARTIST_ORDER, ESSAYS, ESSAY_TEXTS, ESSAY_ORDER } from "site/projects/museum/constants"
import { ArrowLeft, ArrowRight, Globe } from "site/projects/museum/icons"

import { history } from "site/store"

class Essays extends Component {
  state = {
    currentIndex: 0,
    detail: false,
  }

  constructor(props) {
    super(props)
    this.ref = React.createRef()
    this.showEssay = this.showEssay.bind(this)
    this.previousEssay = this.previousEssay.bind(this)
    this.nextEssay = this.nextEssay.bind(this)
    this.close = this.close.bind(this)
    this.goHome = this.goHome.bind(this)
    this.changeLanguage = this.changeLanguage.bind(this)
  }

  componentDidMount() {
    actions.site.interact()
  }

  showEssay(currentIndex) {
    this.setState({ detail: true, currentIndex })
    this.scrollToTop()
  }

  previousEssay() {
    this.go(-1)
  }

  nextEssay() {
    this.go(1)
  }

  go(step) {
    const currentIndex = (this.state.currentIndex + step + ESSAY_ORDER.length) % ESSAY_ORDER.length
    this.setState({ currentIndex })
    this.scrollToTop()
  }

  goHome() {
    history.push(`/thelastmuseum/home/`)
  }

  changeLanguage() {
    actions.site.changeLanguage(this.props.language === "de" ? "en" : "de")
  }

  scrollToTop() {
    setTimeout(() => {
      Array.from(this.ref.current.querySelectorAll(".artist-detail")).forEach(el => {
        el.scrollTo(0, 0)
      })
    }, 0)
  }

  close() {
    this.setState({ detail: false })
  }

  render() {
    const { language } = this.props
    const { currentIndex, detail } = this.state
    return (
      <div className="page page-artists page-essay" ref={this.ref}>
        <div className="artist-list">
          <div className="artists-heading">TEXTS</div>
          {ESSAY_ORDER.map((key, index) => {
            const essay = ESSAYS[key]
            return (
              <div key={key} className="artist-big-name" onClick={() => this.showEssay(index)}>
                {essay.title}
              </div>
            )
          })}
        </div>
        <div className={detail ? "artist-gallery visible" : "artist-gallery"}>
          {ESSAY_ORDER.map((key, index) => (
            <EssayDetail
              key={key}
              essayId={key}
              index={index}
              language={language}
              isCurrent={detail && currentIndex === index}
              onClose={this.close}
            />
          ))}
          {detail && (
            <div className="artist-location" onClick={this.close}>{ESSAYS[ESSAY_ORDER[currentIndex]].title}</div>
          )}
          <div className="nav-arrow arrow-left" onClick={this.previousEssay}>{ArrowLeft}</div>
          <div className="nav-arrow arrow-right" onClick={this.nextEssay}>{ArrowRight}</div>
        </div>
        <div className={detail ? "home-link black" : "home-link"} onClick={this.goHome}>
          Home
        </div>
        <div className={detail ? "home-link language-link black" : "home-link language-link"} onClick={this.changeLanguage}>
          {this.props.language === "de" ? (
            <span><b>de</b> / en</span>
          ) : (
            <span>de / <b>en</b></span>
          )}
        </div>
      </div>
    )
  }
}

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

export default connect(mapStateToProps)(Essays)

const EssayDetail = props => {
  switch (props.essayId) {
    case 'nadim':
      return <NadimEssay {...props} />
    case 'statements':
      return <ArtistStatements {...props} />
    case 'developer':
      return <DeveloperNotes {...props} />
  }
}

const ArtistStatements = ({ essayId, index, isCurrent, language, onClose }) => (
  <div className={isCurrent ? "artist-detail visible" : "artist-detail"}>
    <div className="page-title" onClick={onClose}>ARTIST STATEMENTS</div>
    {ARTIST_ORDER.map((key, index) => {
      const artist = ARTISTS[key]
      return (
        <div key={key} className={key}>
          <div className="page-subtitle">{artist.name}</div>
          <div className="page-content artist-statement" dangerouslySetInnerHTML={{ __html: artist.statement[language] }} />
        </div>
      )
    })}
    <div onClick={onClose} className="artist-close">
      <img src="/thelastmuseum/static/img/close-black.png" />
    </div>
  </div>
)

const NadimEssay = ({ essayId, index, isCurrent, language, onClose }) => (
  <div className={isCurrent ? "artist-detail visible" : "artist-detail"}>
    <div className="page-title" onClick={onClose}>About The L<span>ast Museum</span></div>
    <div className="page-subtitle">By Nadim Samman</div>
    <div className="page-content">
      <span dangerouslySetInnerHTML={{ __html: ESSAY_TEXTS.nadim_intro[language] }} />
      <ArtistGlobe />
      <span dangerouslySetInnerHTML={{ __html: ESSAY_TEXTS.nadim_essay[language] }} />
    </div>
    <div onClick={onClose} className="artist-close">
      <img src="/thelastmuseum/static/img/close-black.png" />
    </div>
  </div>
)

const ArtistGlobe = () => (
  <div className="globe">
    <div className="globe-image">
      {Globe}
      {ARTIST_ORDER.map((key, index) => {
        const artist = ARTISTS[key]
        return (
          <div key={key} style={artist.globePosition} className="number" onClick={() => history.push(`/thelastmuseum/${artist.start}`)}>
            {index + 1}
          </div>
        )
      })}
    </div>
  </div>
)

const DeveloperNotes = ({ essayId, index, isCurrent, language, onClose }) => (
  <div className={isCurrent ? "artist-detail visible" : "artist-detail"}>
    <div className="page-title" onClick={onClose}>Developer Notes</div>
    <div className="page-subtitle">By Jules LaPlace</div>
    <div className="page-content">
      <span dangerouslySetInnerHTML={{ __html: ESSAY_TEXTS.jules_essay[language] }} />
    </div>
    <div onClick={onClose} className="artist-close">
      <img src="/thelastmuseum/static/img/close-black.png" />
    </div>
  </div>
)