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

const VenuesList = ({ 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]}
          open={open}
          setOpen={setOpen}
        />
      ))}
    </div>
  )
}

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

export const Venues = connect(mapStateToProps)(VenuesList)

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, open, setOpen }) => {
  // const [ open, setOpen ] = React.useState(-1)
  const isOpen = open === venue.id
  const creditSections = parseCredits(venue.settings.credits)
  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'>
          <ArtistColumns artists={venue.settings.artists} />
          {creditSections.map(section => (
            <div key={section.i}>
              <div className='credits-title'>
                {section.title}
              </div>
              <div className='credits-info-wide'>
                {section.lines.map((line, j) => (
                  <div
                    key={j}
                    dangerouslySetInnerHTML={{ __html: line || " " }}
                  />
                ))}
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  )
}

export const ArtistColumns = ({ artists }) => {
  const artistGroups = groupColumns(artists.trim().split('\n'), 4)
  return (
    <div>
      <div className='credits-title'>
        Artists
      </div>
      <div className="credits">
        {artistGroups.map((group, i) => (
          <div className='credits-info' key={i}>
            {group.map((line, j) => (
              <div key={j}>{line}</div>
            ))}
          </div>
        ))}
      </div>
    </div>
  )
}