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

import { formatDateTime } from 'app/utils'
import { MenuButton, SmallMenuButton, Loader } from 'app/common'
import actions from 'app/actions'

import { thumbnailURL } from 'app/utils/annotation.utils'

import MediaIndexOptions from '../components/media.indexOptions'
import MediaMenu from '../components/media.menu'

// const { result, collectionLookup } = this.props

class MediaIndex extends Component {
  componentDidMount() {
    // this.fetch(false)
  }

  componentDidUpdate(prevProps) {
    if (this.props.media.options.sort !== prevProps.media.options.sort) {
      this.fetch(false)
    }
  }

  fetch(load_more) {
    const { options } = this.props.media
    const [ sort, order ] = options.sort.split('-')
    actions.media.index({
      episode_id: this.props.episode_id,
      sort, order,
    })
  }

  render() {
    const { options } = this.props.media
    const { loading, lookup, order } = this.props.media.index
    if (loading) {
      return (
        <section>
          <MediaIndexOptions />
          <div className="row">
            {order && !!order.length &&
              <div className={'results ' + options.thumbnailSize}>
                {order.map(id => <MediaItem key={id} data={lookup[id]} />)}
              </div>
            }
          </div>
          <Loader />
        </section>
      )
    }
    if (!lookup || !order.length) {
      return (
        <section>
          <MediaIndexOptions />
          <div className="row">
            <MediaMenu />
            <p className='gray'>
              {"No media"}
            </p>
          </div>
        </section>
      )
    }
    return (
      <section>
        <MediaIndexOptions />
        <div className="row">
          <MediaMenu />
          <div className={'results ' + options.thumbnailSize}>
            <h2>Images</h2>
            {order.filter(id => lookup[id].type === 'image').map(id => <MediaItem key={id} data={lookup[id]} />)}
            <h2>Galleries</h2>
            {order.filter(id => lookup[id].type === 'gallery').map(id => <GalleryItem key={id} data={lookup[id]} />)}
            <h2>Videos</h2>
            {order.filter(id => lookup[id].type === 'video' && !lookup[id].medium.match(/book/i)).map(id => <MediaItem key={id} data={lookup[id]} />)}
            <h2>Books</h2>
            {order.filter(id => lookup[id].type === 'video' && lookup[id].medium.match(/book/i)).map(id => <MediaItem key={id} data={lookup[id]} />)}
            <h2>Files</h2>
            {order.filter(id => lookup[id].type === 'file').map(id => <FileItem key={id} data={lookup[id]} />)}
          </div>
        </div>
      </section>
    )
  }
}

const MediaItem = ({ data }) => {
  // console.log(data)
  return (
    <div className='cell'>
      <div className='img'>
        <Link to={`/editor/${data.episode_id}/media/${data.id}/edit/`}>
          <img src={thumbnailURL(data)} alt={data.title} />
        </Link>
      </div>
      <div className='meta center'>
        <div>
          <i>{data.title}</i><br />
          {data.author}<br />
          {data.date}
        </div>
      </div>
    </div>
  )
}

const GalleryItem = ({ data }) => {
  // console.log(data)
  return (
    <div className='cell'>
      <div className='meta center'>
        <div className='img'>
          <Link to={`/editor/${data.episode_id}/media/${data.id}/edit/`}>
            <img src={thumbnailURL(data)} alt={data.title} />
          </Link>
        </div>
        <Link to={"/media/" + data.id + "/edit/"}>
          <div>
            <i>{data.title}</i><br />
            {data.author}<br />
            {data.date}
          </div>
        </Link>
      </div>
    </div>
  )
}

const FileItem = ({ data }) => {
  // console.log(data)
  return (
    <div className='cell'>
      <div className='meta center'>
        <Link to={`/editor/${data.episode_id}/media/${data.id}/edit/`}>
          <div>
            <i>{data.title}</i><br />
            {data.settings.file.url}<br />
          </div>
        </Link>
      </div>
    </div>
  )
}


const mapStateToProps = state => ({
  media: state.media,
  episode_id: state.site.episode.id,
})

export default connect(mapStateToProps)(MediaIndex)