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

import { MediaCitation } from '../components.media'
import { CreditsColumns } from 'app/views/viewer/checklist/credits.components'

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">
        <i>Animism</i>
        {' on '}
        <a href="https://e-flux.com/">e-flux.com</a>
        {' is the ninth iteration of the exhibition and overall '}
        {'research project presented at Museum of Contemporary Art Antwerp (M HKA) and Extra City, '}
        {'Antwerp, 2010, Kunsthalle Bern, 2010, '}
        {'Generali Foundation, Vienna, 2011, Haus der Kulturen der Welt, '}
        {'Berlin, 2012, e-flux, New York, 2012, OCT Contemporary Art Terminal (OCAT) Shenzhen, 2013, '}
        {'Ilmin Museum of Art, Seoul, 2013, '}
        {'and Ashkal Alwan, Beirut, 2014.'}
        <br/><br/>
        {'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'>Episodes</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>
      <CreditsColumns lines={currentEpisode.credits} />
    </div>
  )
}

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

export const Schedule = connect(mapStateToProps)(ScheduleComponent)