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

import { MediaCitation } from '../components.media'

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, venues }) => {
  console.log(episodes.lookup[episodes.order[0]])
  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-title'>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 mapStateToProps = state => ({
  episodes: state.episode.index,
  episode: state.episode.show.res || {},
  venues: state.venue.index,
})

export const Schedule = connect(mapStateToProps)(ScheduleComponent)