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

import { MediaCitation } from '../components.media'
import { Arrow } from 'app/views/viewer/nav/viewer.icons'
import { CreditsColumns, ArtistColumns } 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 [ open, setOpen ] = React.useState(-1)
  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 November 2020.'}
      </div>
      <div className='schedule'>
        <div className='schedule-heading'>Episodes</div>
        {episodes.order.map(id => {
          const episode = episodes.lookup[id]
          const isOpen = episode.id === open
          const hasTitle = !!episode.title && episode.title !== "TBD"
          let className = 'schedule-row'
          if (episode.is_live) {
            className += ' active'
          } else {
            className += ' inactive'
          }
          if (open === episode.id) {
            className += ' open'
          }
          return (
            <div key={episode.id}>
              <div
                className={className}
                onClick={() => episode.is_live && setOpen(isOpen ? -1 : episode.id)}
              >
                <div className='schedule-date'>
                  {episode.release_date}
                </div>
                <div className='schedule-title'>
                  {'Episode '}{episode.episode_number}
                  {hasTitle && ': '}
                  {hasTitle && <i>{episode.title}</i>}
                </div>
                {episode.is_live && <Arrow type={isOpen ? 'up' : 'down'} />}
              </div>
              <ArtistColumns artists={episode.settings.artists} />
            </div>
          )
        })}
      </div>
      <CreditsColumns lines={currentEpisode.credits} />
    </div>
  )
}

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

export const Schedule = connect(mapStateToProps)(ScheduleComponent)