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

import { history } from "site/store"

import { CREDITS_STRINGS } from "../constants"
import { LastMuseumLogo } from "../icons"

import "./credits.css"

class Credits extends Component {
  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
    this.goHome = this.goHome.bind(this)
    this.changeLanguage = this.changeLanguage.bind(this)
  }

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

  handleClick(e) {
    e && e.preventDefault()
  }

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

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

  render() {
    const { language } = this.props
    return (
      <div className="page page-credits">
        <div className="page-title">{LastMuseumLogo}</div>
        <div className="page-credits-inner">
          <div className="page-content credits-columns">
            <div className="page-left">
              <div className="page-subtitle">CREDITS</div>
              <div dangerouslySetInnerHTML={{ __html: CREDITS_STRINGS.site_credits[language] }} />
            </div>

            <div className="page-right">
              <div className="page-subtitle">{CREDITS_STRINGS.artwork_credits_head[language]}</div>
              <div className="columns">
                <div className="column" dangerouslySetInnerHTML={{ __html: CREDITS_STRINGS.artist_credits_1[language] }} />
                <div className="column" dangerouslySetInnerHTML={{ __html: CREDITS_STRINGS.artist_credits_2[language] }} />
              </div>
            </div>
          </div>

          <div className="page-content icon-rows">
            <div className="icons">
              <img className="kw-logo" src="/thelastmuseum/static/media/last-museum/kw-black.png" />
              <img src="/thelastmuseum/static/media/last-museum/arte-logo-black.png" />
              <img src="/thelastmuseum/static/media/last-museum/pcai-logo-black.png" className='pcai' />
              <img src="/thelastmuseum/static/media/last-museum/berlin-logo-black.png" />
            </div>
          </div>
        </div>
        <div className="home-link" onClick={this.goHome}>
          Home
        </div>
        <div className="home-link language-link black" onClick={this.changeLanguage}>
          {this.props.language === "de" ? (
            <span><b>de</b> / en</span>
          ) : (
            <span>de / <b>en</b></span>
          )}
        </div>
      </div>
    )
  }
}

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

export default connect(mapStateToProps)(Credits)

/*
              Sources:<br/>
              René Magritte, <i>The Glass Key (La clef de verre)</i>, 1959, oil on canvas.<br/>
              Courtesy The Menil Collection, Houston.<br/>
              René Guénon. <i>Lord of the World</i>, 1927 / <i>Etudes Traditionnelles</i>, 1938.<br/>
              Robert Smithson. <i>Incidents of Mirror-Travel in the Yucatan</i>, 1969.<br/>
              Thomas Pynchon. <i>Against the Day</i>, 2006.<br/>
              Mircea Eliade. <i>The Forge and the Crucible</i>, 1956. <br/>
              Clarice Lispector. <i>The Egg and the Chicken</i>, 1964.<br/>
              Clarice Lispector. <i>Agua Viva</i>, 1973<br/>
 */