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

import "./artists.css"

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

import { history } from "site/store"

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

  constructor(props) {
    super(props)
    this.ref = React.createRef()
    this.showArtist = this.showArtist.bind(this)
    this.previousArtist = this.previousArtist.bind(this)
    this.nextArtist = this.nextArtist.bind(this)
    this.goHome = this.goHome.bind(this)
    this.changeLanguage = this.changeLanguage.bind(this)
  }

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

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

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

  nextArtist() {
    this.go(1)
  }

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

  goHome() {
    history.push(`/last-museum/home/`)
  }
  
  changeLanguage() {
    actions.site.changeLanguage(this.props.language === "de" ? "en" : "de")
  }

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

  render() {
    const { language } = this.props
    const { currentIndex, detail } = this.state
    return (
      <div className="page page-artists">
        <div className="artist-list">
          <div className="artists-heading">ARTISTS</div>
          {ARTIST_ORDER.map((key, index) => {
            const artist = ARTISTS[key]
            return (
              <div key={key} className="artist-big-name" onClick={() => this.showArtist(index)}>
                {artist.name}
              </div>
            )
          })}
        </div>
        <div className={detail ? "artist-gallery visible" : "artist-gallery"}>
          {ARTIST_ORDER.map((key, index) => (
            <ArtistDetail
              artist={ARTISTS[key]}
              key={key}
              index={index}
              isCurrent={detail && currentIndex === index}
              language={language}
              onClose={() => this.setState({ detail: false })}
            />
          ))}
          <div className="nav-arrow arrow-left" onClick={this.previousArtist}>{ArrowLeft}</div>
          <div className="nav-arrow arrow-right" onClick={this.nextArtist}>{ArrowRight}</div>
        </div>
        <div className={detail ? "home-link" : "home-link"} onClick={this.goHome}>
          Home
        </div>
        <div className={detail ? "home-link language-link" : "home-link language-link"} onClick={this.changeLanguage}>
          {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)(Artists)

const ArtistDetail = ({ artist, index, isCurrent, language, onClose }) => {
  return (
    <div className={isCurrent ? "artist-detail visible" : "artist-detail"}>
      <div className="artist-right" style={{ backgroundImage: `url(${artist.image})`}} />
      <div className="artist-content">
        <div className="artist-left">
          <span dangerouslySetInnerHTML={{ __html: artist.bio[language] }} />
        </div>
        <Link to={`/last-museum/${artist.start}`} className="artist-right-inner" />
      </div>
      <div className="artist-detail-name" onClick={onClose}>
        {artist.name}
      </div>
      <div className="artist-location">{artist.location[language]}</div>
    </div>
  )
}