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

import { MediaCitation } from '../components.media'
import { Arrow } from '../../nav/viewer.icons'

export const Intro = ({ paragraph, media, onAnnotationClick }) => {
  const annotation = paragraph.annotations[0]
  const item = media.lookup[annotation.settings.media_id]
  // console.log(item)
  const style = {
    backgroundImage: 'url(' + item.settings.file.url + ')',
  }
  let lines = []
  if (annotation.settings.title) {
    lines = lines.concat(annotation.settings.title.split(/<br[^>]*>/))
  }
  if (annotation.settings.subtitle) {
    lines = lines.concat(annotation.settings.subtitle.split(/<br[^>]*>/))
  }
  return (
    <div>
      <div
        className='site-intro'
        style={style}
      >
        <div className='inner'>
          {lines.map((line, i) => (
            <span key={i} dangerouslySetInnerHTML={{ __html: line }} />
          ))}
        </div>
      </div>
      <div className='media intro'>
        <MediaCitation media={item} />
      </div>
    </div>
  )
}

const ScheduleComponent = ({ episodes }) => {
  const currentEpisode = episodes.lookup[episodes.order[0]].settings
  return (
    <div>
      <div className="schedule-about">
        {'Animism on e-flux.com is the ninth iteration of the exhibition and overall '}
        {'research project presented at Extra City and MuHKA, Antwerp, 2010; Kunsthalle '}
        {'Bern, 2010; Generali Foundation, Vienna, 2011; the Haus der Kulturen der Welt, '}
        {'Berlin, 2012; e-flux, New York, 2012; OCAT Shenzhen, 2013; Times Museum Seoul, '}
        {'2013; and Ashkal Alwan, Beirut, 2014. Presented here in its digital iteration, '}
        {'the exhibition will be released in four episodes starting October 2020.'}
      </div>
      <div className='schedule'>
        <div className='schedule-heading'>Schedule</div>
        {episodes.order.map(id => {
          const episode = episodes.lookup[id]
          return (
            <div className={episode.is_live ? 'schedule-row active' : 'schedule-row inactive'} key={episode.id}>
              <div className='schedule-date'>
                {episode.release_date}
              </div>
              <div className='schedule-title'>
                {'Episode '}{episode.episode_number}{': '}
                <i>{episode.title}</i>
              </div>
            </div>
          )
        })}
      </div>
      <div className='credits'>
        <div>
          <div className='credits-title'>
            Curator
          </div>
          <div className='credits-info'>
            {currentEpisode.curator}
          </div>
        </div>
        <div>
          <div className='credits-title'>
            Author
          </div>
          <div className='credits-info'>
            {currentEpisode.author}
          </div>
        </div>
        <div>
          <div className='credits-title'>
            Artists
          </div>
          <div className='credits-info'>
            {currentEpisode.artists}
          </div>
        </div>
      </div>
    </div>
  )
}

const CreditsComponent = ({ episodes, venues }) => {
  const currentEpisode = episodes.lookup[episodes.order[0]].settings
  // const [ open, setOpen ] = React.useState(-1)
  const lines = currentEpisode.credits.split("\n").map((s, i) => {
    if (s[0] === "#") {
      return (
        <div className='credits-title' key={i}>
          {s.replace("#", "").trim()}
        </div>
      )
    }
    return (
      <div
        key={i}
        dangerouslySetInnerHTML={{ __html: s || " " }}
      />
    )
  })
  return (
    <div className='site-credits'>
      <div className='site-lines'>
        {lines}
      </div>
      <div className='credits-title'>
        Previous venues
      </div>
      {venues.order.map(id => (
        <CreditsVenue
          key={id}
          venue={venues.lookup[id]}
        />
      ))}
    </div>
  )
}

const CreditsVenue = ({ venue }) => {
  const [ open, setOpen ] = React.useState(-1)
  const isOpen = open === venue.id
  const curators = venue.settings.curator.trim().split('\n')
  const artists = venue.settings.artists.trim().split('\n')
  const publication_heading = venue.settings.publication_heading
  const publication = venue.settings.publication.trim().split('\n')
  return (
    <div className={isOpen ? 'venue open' : 'venue'}>
      <div className='venue-header' onClick={() => setOpen(isOpen ? -1 : venue.id)}>
        <div>
          {venue.title}<br />
          {venue.date}
        </div>
        <Arrow type={isOpen ? 'up' : 'down'} />
      </div>
      {isOpen && (
        <div className='venue-info credits'>
          <div>
            <div className='credits-title'>
              {curators.length > 1 ? 'Curators' : 'Curator'}
            </div>
            <div className='credits-info'>
              {curators.map((line, i) => (
                <div key={i}>{line}</div>
              ))}
            </div>
          </div>

          <div>
            <div className='credits-title'>
              Artists
            </div>
            <div className='credits-info'>
              {artists.map((line, i) => (
                <div key={i}>{line}</div>
              ))}
            </div>
          </div>

          {publication.length > 1 && (
            <div>
              <div className='credits-title'>
                {publication_heading}
              </div>
              <div className='credits-info'>
                {publication.map((line, i) => (
                  <div
                    key={i}
                    dangerouslySetInnerHTML={{ __html: line || " " }}
                  />
                ))}
              </div>
            </div>
          )}
        </div>
      )}
    </div>
  )
}

const mapStateToProps = state => ({
  episodes: state.episode.index,
  venues: state.venue.index,
})

export const Schedule = connect(mapStateToProps)(ScheduleComponent)
export const Credits = connect(mapStateToProps)(CreditsComponent)