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

import actions from 'app/actions'

import { EfluxClose } from '../nav/eflux.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>
      </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)