import React from 'react'

import DownloadButton from '../buttons/download'
import TorrentsButton from './torrents'
import ActionsButton from './actions'
import ListPosters from '../list/posters'
import ListDetails from '../list/details'
import Loader from '../loader/loader'

function MovieButtons(props) {
  const imdb_link = `http://www.imdb.com/title/${props.movie.imdb_id}`;
  const hasMovie = (props.movie.polochon_url !== "");
  return (
    <div className="list-details-buttons btn-toolbar">
      <ActionsButton
        fetching={props.fetching}
        movieId={props.movie.imdb_id}
        getDetails={props.getMovieDetails}
        deleteMovie={props.deleteMovie}
        isUserAdmin={props.isUserAdmin}
        hasMovie={hasMovie}
        wishlisted={props.movie.wishlisted}
        addToWishlist={props.addToWishlist}
        deleteFromWishlist={props.deleteFromWishlist}
      />

      {props.movie.torrents &&
          <TorrentsButton
            torrents={props.movie.torrents}
            addTorrent={props.addTorrent}
          />
      }

      <DownloadButton url={props.movie.polochon_url}/>

      <a type="button" className="btn btn-warning btn-sm" href={imdb_link}>
        <i className="fa fa-external-link"></i> IMDB
      </a>
  </div>
  );
}

export default class MovieList extends React.Component {
  handleParams(props = this.props) {
    // Check if the URL to fetch is in the props
    if (props.moviesUrl) {
      this.props.fetchMovies(props.moviesUrl);
      return
    }

    // Check for URL parameters
    if (!props.params) {
      return
    }

    // Search param
    if  (props.params.search && props.params.search !== "") {
      props.searchMovies({
        key: props.params.search
      });
      return
    }
  }
  componentWillMount() {
    this.handleParams();
  }
  componentWillUpdate(nextProps, nextState) {
    // No params
    if (!nextProps.params) {
      return
    }

    // Search field changed
    if (this.props.params.search
      && (this.props.params.search !== nextProps.params.search)
      && (nextProps.params.search !== "")) {
      this.handleParams(nextProps);
      return
    }
  }
  render() {
    const movies = this.props.movieStore.movies;
    const selectedMovieId = this.props.movieStore.selectedImdbId;
    let index = movies.map((el) => el.imdb_id).indexOf(selectedMovieId);
    if (index === -1) {
      index = 0;
    }
    const selectedMovie = movies[index];

    // Loading
    if (this.props.movieStore.loading) {
      return (<Loader />);
    }

    return (
      <div className="row" id="container">
        <ListPosters
          data={movies}
          type="movies"
          formModel="movieStore"
          filterControlModel="movieStore.filter"
          filterControlPlaceHolder="Filter movies..."
          fetchExploreOptions={this.props.getMovieExploreOptions}
          exploreOptions={this.props.movieStore.exploreOptions}
          explore={this.props.exploreMovies}
          selectedImdbId={selectedMovieId}
          filter={this.props.movieStore.filter}
          perPage={this.props.movieStore.perPage}
          onClick={this.props.selectMovie}
          params={this.props.params}
          router={this.props.router}
        />
        {selectedMovie &&
          <ListDetails data={selectedMovie}>
            <MovieButtons
              movie={selectedMovie}
              fetching={this.props.movieStore.fetchingDetails}
              getMovieDetails={this.props.getMovieDetails}
              addTorrent={this.props.addTorrent}
              deleteMovie={this.props.deleteMovie}
              isUserAdmin={this.props.userStore.isAdmin}
              addToWishlist={this.props.addMovieToWishlist}
              deleteFromWishlist={this.props.deleteMovieFromWishlist}
            />
          </ListDetails>
        }
      </div>
    );
  }
}