import React from 'react'
import { connect } from 'react-redux'
import { Arrow } from '../nav/viewer.icons'
import { parseCredits } from 'app/utils/viewer.utils'

const VenuesComponent = ({ venues }) => {
  // const [ open, setOpen ] = React.useState(-1)
  return (
    <div className='site-credits'>
      <div className='credits-title'>
        Previous venues
      </div>
      {venues.order.map(id => (
        <CreditsVenue
          key={id}
          venue={venues.lookup[id]}
        />
      ))}
    </div>
  )
}

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

export const Venues = connect(mapStateToProps)(VenuesComponent)

export const CreditsColumns = ({ lines }) => {
  const creditSections = parseCredits(lines)
  return (
    <div className='credits'>
      {creditSections.map(section => (
        <div key={section.i}>
          <div className='credits-title'>
            {section.title}
          </div>
          <div className='credits-info'>
            {section.lines.map((line, j) => (
              <div
                key={j}
                dangerouslySetInnerHTML={{ __html: line || " " }}
              />
            ))}
          </div>
        </div>
      ))}
    </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>
  )
}