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

import actions from 'app/actions'

import { mod } from 'app/utils'
import { EfluxClose } from '../nav/eflux.icons'
import { Arrow } from '../nav/viewer.icons'

class VitrineModal extends Component {
  render() {
    const { open, media, index } = this.props.vitrineModal
    if (!media) {
      return (
        <div className='vitrine-modal'></div>
      )
    }
    const className = open ? 'vitrine-modal open' : 'vitrine-modal'
    const id = media.settings.image_order[index]
    const image = (media.settings.display_lookup || media.settings.image_lookup)[id]
    const caption = media.settings.caption_lookup[id]
    return (
      <div className={className}>
        <div className='vitrine-modal-content'>
          <div className='vitrine-image' style={{
            backgroundImage: 'url(' + image.url + ')',
          }} />
          <div className='vitrine-text'>
            <div>
              {caption.title && <VitrineCaption caption={caption} />}
              <div className='vitrine-text-content'>
                {caption.long_caption || caption.caption}
              </div>
            </div>
          </div>
        </div>
        <div className='vitrine-close' onClick={() => actions.viewer.closeVitrineModal()}>
          {EfluxClose}
        </div>
        <VitrineNavigation media={media} index={index} direction={-1} />
        <VitrineNavigation media={media} index={index} direction={+1} />
      </div>
    )
  }
}

const VitrineNavigation = ({ media, index, direction }) => {
  const isPrev = direction === -1
  const className = isPrev ? 'vitrine-nav prev' : 'vitrine-nav next'
  const targetIndex = mod(index + direction, media.settings.image_order.length)
  const id = media.settings.image_order[targetIndex]
  const thumbnail = media.settings.thumbnail_lookup[id]
  return (
    <div className={className} onClick={() => actions.viewer.setVitrineIndex(targetIndex)}>
      <div className='vitrine-nav-content'>
        {isPrev && <Arrow type='left'/>}
        {isPrev ? 'Previous' : 'Next'}
        {!isPrev && <Arrow type='right'/>}
      </div>
      <div className='vitrine-nav-thumbnail' style={{ backgroundImage: 'url(' + thumbnail.url + ')' }} />
    </div>
  )
}

const VitrineCaption = ({ caption }) => {
  return (
    <div className='vitrine-caption'>
      {caption.author && (
        <span>{caption.author}</span>
      )}
      {caption.title && (
        <span><br /><i>{caption.title}</i></span>
      )}
      {caption.date && (
        <span><br />{caption.date}</span>
      )}
    </div>
  )
}

const mapStateToProps = state => ({
  vitrineModal: state.viewer.vitrineModal,
})

export default connect(mapStateToProps)(VitrineModal)