import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { bindActionCreators } from 'redux'
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/views/align/align.util'

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, index } = this.props.media
    const { order: index_order } = index
    const [ sort, order ] = options.sort.split(' ')
    actions.media.index({
      sort, order, limit: 5000, // offset: load_more ? index_order.length : 0,
    }, load_more)
  }

  render() {
    const { mediaActions } = this.props
    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>Video</h2>
            {order.filter(id => lookup[id].type === 'video').map(id => <MediaItem key={id} data={lookup[id]} />)}
          </div>
        </div>
        {order.length >= 50 && <button className='loadMore' onClick={() => this.fetch(true)}>Load More</button>}
      </section>
    )
  }
}

const MediaItem = ({ data }) => {
  // console.log(data)
  return (
    <div className='cell'>
      <div className='img'>
        <Link to={"/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 mapStateToProps = state => ({
  media: state.media,
})

const mapDispatchToProps = dispatch => ({
  // uploadActions: bindActionCreators({ ...uploadActions }, dispatch),
})

export default connect(mapStateToProps, mapDispatchToProps)(MediaIndex)