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_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(`/last-museum/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} />
  }
}

const ArtistStatements = ({ essayId, index, isCurrent, language, onClose }) => (
  <div className={isCurrent ? "artist-detail visible" : "artist-detail"}>
    <div className="page-title" onClick={onClose}>ARTIST STATEMENTS</div>
    <br /><br />
    {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>
)

const NadimEssay = ({ essayId, index, isCurrent, 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">
      <p>
        <i>The Last Museum</i> is an exhibition that explores productive tensions between the putative ‘anywhere’  of the digital and its relation to local particulars. Deploying a hybrid offline-online format, the project invites an international group of artists to reimagine site-specificity, through a sequence of interventions that cut across both real and virtual domains. The artists are <b>Nora Al-Badri</b> (Germany/Iraq), <b>Juliana Cerqueira Leite</b> (Brazil), <b>Nicole Foreshew</b> (Wiradjuri Nation/Australia), <b>Jakrawal Nilthamrong</b> (Thailand), <b>Zohra Opoku</b> (Ghana), and <b>Charles Stankievech</b> (Canada).
      </p>
      <ArtistGlobe />
      <p>
        <i>The Last Museum</i> connects disparate sites, spanning six continents and the virtual sphere. It is an experiment that deploys a unique exhibition design—embracing the overlapping <i>analog</i> and <i>digital</i> dimensions of a given location while, additionally, exploiting the unique potentials of each for dramatic effect. Altogether, <i>The Last Museum</i> comprises an epic <i>para-site</i> that is most accessible through a web  interface.
      </p>
      <p>
        Each artist was commissioned to author a sculptural group, to be installed at an outdoor site of their own choosing. The choice was only limited by a request that it be associated with communication and connectivity. Final choices ended up highlighting both technical and more esoteric forms of transmission—and included a notorious hacker hangout (Berlin’s C-base), ancestral land in rural Australia, a down-at-heel electronics mall in downtown Sao Paolo, a neutrino observatory in the Rocky Mountains, and more.
      </p>
      <p>
        Each sculptural intervention was videoed by the artists, and the resulting clips (from all over the world) were handed over to a digital artist, <a href="https://asdf.us/" className="jules-link" target="_blank">Jules LaPlace</a>, who brought them together through a digital way-finding protocol; the exhibition’s ‘hang’. The public outcome, debuting as a pop-up window on the KW start page, is a website experience that unfolds as an interactive sequence of objects and places, navigable using bespoke tools. At times, these tools amount to additional (digital) artworks. Visitors will have a sense that that the exhibition is a wormhole, of sorts. 
      </p>
      <p>
        Some of the featured locations are associated with infrastructure and the World Wide Web, others include waterways and climate. Uniting these seemingly disparate aspects, a conceptual leitmotif of visually <i>grounding</i> planetary networks and other globe-spanning systems will be evident. Call it a <i>web-site-specific</i> project—in the sense that both art and exhibition design re-imagines the stakes of ‘site-specificity’ for digital times. What this means is that <i>The Last Museum</i>’s ‘site’ is a layered reality or (to borrow a term from computational engineering) a ‘Stack’. Our exhibition-stack encompasses material facts on the ground, digital code, and softer site specificities—including those previously outlined by the art historian Miwon Kwon, such as ‘cultural debates, a theoretical concept, a historical condition, even particular formations of desire’. Each artwork in <i>The Last Museum</i> is a kind of a vector that intersects with all of the stack’s layers.
      </p>
      <p>
        For visitors, <i>The Last Museum</i> will offer a blurring between cinema and website interactivity. The ability to stay with a moving image for as long as you want, pushing the edit along at your own pace, is not normally available as a filmic experience. In fact, it is more a province of gaming. Other interactions will include releasing files for download, accessing texts, switching soundtrack variations and more. All of these things will be artist directed and thus in no way interpretive or secondary materials.
      </p>
      <p>
        Rather than being a one-off exhibition, <i>The Last Museum</i> will ‘tour’ as a pop-up window on the start pages of partner institutions for fixed periods. In line with the project’s rejection of an ‘anywhere, anytime’ web imaginary, each touring iteration will acquire a new chapter—with an additional artist/site from the host institution’s country added to the navigable chain. As long as our colleagues’ are interested, it is possible that <i>The Last Museum</i> may tour and grow indefinitely—like the content of the web itself.
      </p>
      <p>
        This project was conceived during the first wave of COVID-19, amid heightened tensions between the conditions of physical lockdown and globe-spanning telecommunication. Although utterly international, its production required no travel for persons or artworks. When the exhibition opens, audiences will not have to travel to view it. While the development of such a format is not supposed to replace gallery experience, it is at least suggestive for how to approach a growing question in the museum sector: namely, how do analog artworks and digital space can come together a meaningful way? In fact, this is only half of the question: We must also explore how digital artworks can relate to analog space. <i>The Last Museum</i> attempts to work on both problems at the same time, creatively, playing with the issue of translation and re-representation in a bi-directional manner.
      </p>
      <p>
        At its core, The Last Museum explores how tangibility and distance interact, how things that seem fixed in place might (or do) escape in various forms. In a sense, then, it clear that we are dealing with an issue as old as art itself (albeit, employing contemporary tools). At least one of the exhibition’s artists, Zohra Opoku, explicitly takes up an art-historical precursor for the crossing of spatial and metaphysical thresholds. The Egyptian Book of the Dead is her inspiration for a series of interventions in a half-built mortuary in Accra, Ghana. Draped with screen-printed fabric, the unfinished site is (literally) shrouded in images that stimulate reflection on how stillness and passage come together. In this work and more, the <i>The Last Museum</i> hovers somewhere between life and death, lockdown and escape.
      </p>
    </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(`/last-museum/${artist.start}`)}>
            {index + 1}
          </div>
        )
      })}
    </div>
  </div>
)