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 }) => {
  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 CreditsComponent = ({ episodes, venues }) => {
  const currentEpisode = episodes.lookup[episodes.order[0]].settings
  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}>{s || " "}</div>
    )
  })
  return (
    <div className='site-credits'>
      {lines}
    </div>
  )
}

const CreditsVenue = ({ venue }) => {
  return (
    <div />
  )
}

export const SubscriptionForm = () => {
  return (
    <div className="subscription-form">
      Stay up to date and get notified when the next episode is available
      <input type="text" placeholder="Email address here" />
    </div>
  )
}

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

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