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

import actions from 'app/actions'

import { EfluxClose } from '../nav/eflux.icons'
import { Arrow } from '../nav/viewer.icons'
import { CURTAIN_COLOR_LOOKUP } from 'app/constants'

class VitrineModal extends Component {
  render() {
    const { open, media, color, index } = this.props.vitrineModal
    if (!media) {
      return (
        <div className='vitrine-modal'></div>
      )
    }
    // console.log(color)
    const className = open ? 'vitrine-modal open' : 'vitrine-modal'
    const id = media.settings.image_order[index]
    const image = media.settings.display_lookup[id] || 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 + ')',
            backgroundColor: color.backgroundColor,
          }} />
          <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} color={color} direction={-1} />
        <VitrineNavigation media={media} index={index} color={CURTAIN_COLOR_LOOKUP.white} direction={+1} />
      </div>
    )
  }
}

const VitrineNavigation = ({ media, color, index, direction }) => {
  let id, thumbnail
  const isPrev = direction === -1
  let className = (isPrev ? 'vitrine-nav prev ' : 'vitrine-nav next ') + color.label
  // const targetIndex = mod(index + direction, media.settings.image_order.length)
  const targetIndex = index + direction
  const shouldClose = (targetIndex < 0) || (targetIndex === media.settings.image_order.length)
  if (shouldClose) {
    className += ' nav-close'
  } else {
    id = media.settings.image_order[targetIndex]
    thumbnail = media.settings.thumbnail_lookup[id]
  }
  return (
    <div className={className} onClick={() => {
      actions.viewer.vitrineGo(direction)
    }}>
      <div className='vitrine-nav-content'>
        {isPrev && <Arrow type='left'/>}
        {shouldClose ? 'Close' : isPrev ? 'Previous' : 'Next'}
        {!isPrev && <Arrow type='right'/>}
      </div>
      {!shouldClose && (
        <div
          className={'vitrine-nav-thumbnail ' + color.label}
          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)