import React, { Component } from 'react'
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"

export default 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)
  }

  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()
  }

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

  render() {
    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}
              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>
    )
  }
}

const ArtistDetail = ({ artist, index, isCurrent, 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 }} />
        </div>
        <div className="artist-right">
          <span dangerouslySetInnerHTML={{ __html: artist.statement }} />
        </div>
      </div>
      <div className="artist-detail-name" onClick={onClose}>
        {artist.name}
      </div>
      <div className="artist-location">{artist.location}</div>
    </div>
  )
}