import React from 'react'
import { Map, List, fromJS } from 'immutable'

import fuzzy from 'fuzzy';
import InfiniteScroll from 'react-infinite-scroller';

import ListFilter from './filter'
import ExplorerOptions from './explorerOptions'
import ListPoster from './poster'

import Loader from '../loader/loader'

const DEFAULT_LIST_SIZE = 30;
const DEFAULT_ADD_EXTRA_ITEMS = 30;

export default class ListPosters extends React.Component {
  constructor(props) {
    super(props);
    this.loadMore = this.loadMore.bind(this);
    this.state = this.getNextState(props);
  }
  loadMore() {
    // Nothing to do if the app is loading
    if (this.props.loading) {
      return;
    }

    if (this.props.data === undefined) {
      return;
    }

    this.setState(this.getNextState(this.props));
  }
  getNextState(props) {
    let totalListSize = props.data !== undefined ? props.data.size : 0;
    let currentListSize = (this.state && this.state.items) ? this.state.items : 0;
    let nextListSize = currentListSize + DEFAULT_ADD_EXTRA_ITEMS;
    let hasMore = true;

    if (nextListSize >= totalListSize) {
      nextListSize = totalListSize;
      hasMore = false;
    }

    return {
      items: nextListSize,
      hasMore: hasMore,
    };
  }
  componentWillReceiveProps(nextProps) {
    if (this.props.data === undefined) { return }
    if (nextProps.data === undefined) { return }

    if (this.props.data.size !== nextProps.data.size) {
      this.setState(this.getNextState(nextProps));
    }
  }
  render() {
    let elmts = this.props.data;
    const listSize = elmts !== undefined ? elmts.size : 0;
    const colSize = (listSize !== 0) ? "col-xs-5 col-md-8" : "col-xs-12";

     // Filter the list of elements
     if (this.props.filter !== "") {
       elmts = elmts.filter((v) => fuzzy.test(this.props.filter, v.get('title')), this);
     } else {
       elmts = elmts.slice(0, this.state.items);
     }

    // Chose when to display filter / explore options
    let displayFilter = true;
    if ((this.props.params
      && this.props.params.category
      && this.props.params.category !== ""
      && this.props.params.source
      && this.props.params.source !== "")
      || (listSize === 0)) {
      displayFilter = false;
    }

    return (
      <div className={colSize}>
        {displayFilter &&
          <ListFilter
            updateFilter={this.props.updateFilter}
            placeHolder={this.props.placeHolder}
          />
        }
        <ExplorerOptions
          type={this.props.type}
          display={!displayFilter}
          params={this.props.params}
          router={this.props.router}
          options={this.props.exploreOptions}
        />
        <Posters
          elmts={elmts}
          loading={this.props.loading}
          hasMore={this.state.hasMore}
          loadMore={this.loadMore}
          selectedImdbId={this.props.selectedImdbId}
          onClick={this.props.onClick}
        />
      </div>
    );
  }
}

class Posters extends React.PureComponent {
  constructor(props) {
    super(props);
  }
  render() {
    if (this.props.loading) {
      return (<Loader />);
    }

    if (this.props.elmts.size === 0)  {
      return (
        <div className="jumbotron">
          <h2>No result</h2>
        </div>
      );
    }

    return (
      <div>
        <InfiniteScroll
          hasMore={this.props.hasMore}
          loadMore={this.props.loadMore}
          className="row"
        >
          {this.props.elmts.toIndexedSeq().map(function(movie, index) {
            const imdbId = movie.get('imdb_id');
            const selected = (imdbId === this.props.selectedImdbId) ? true : false;
            return (
              <ListPoster
                index={index}
                data={movie}
                key={imdbId}
                selected={selected}
                onClick={() => this.props.onClick(imdbId)}
              />
            )
          } ,this)}
        </InfiniteScroll>
      </div>
    );
  }
}