import React from "react"
import { connect } from "react-redux"
import { bindActionCreators } from "redux"
import { addTorrent } from "../../actions/torrents"
import { refreshSubtitles } from "../../actions/subtitles"
import { addMovieToWishlist, deleteMovie, deleteMovieFromWishlist,
  getMovieDetails, selectMovie, updateFilter } from "../../actions/movies"

import DownloadButton from "../buttons/download"
import SubtitlesButton from "../buttons/subtitles"
import ImdbButton from "../buttons/imdb"
import TorrentsButton from "./torrents"
import ActionsButton from "./actions"
import ListPosters from "../list/posters"
import ListDetails from "../list/details"

function mapStateToProps(state) {
  return {
    loading : state.movieStore.get("loading"),
    movies : state.movieStore.get("movies"),
    filter : state.movieStore.get("filter"),
    selectedImdbId : state.movieStore.get("selectedImdbId"),
    lastFetchUrl : state.movieStore.get("lastFetchUrl"),
    exploreOptions : state.movieStore.get("exploreOptions"),
  };
}
const mapDispatchToProps = (dipatch) =>
  bindActionCreators({ selectMovie, getMovieDetails, addTorrent,
    addMovieToWishlist, deleteMovie, deleteMovieFromWishlist,
    refreshSubtitles, updateFilter }, dipatch)

function MovieButtons(props) {
  const hasMovie = (props.movie.get("polochon_url") !== "");
  return (
    <div className="list-details-buttons btn-toolbar">
      <ActionsButton
        fetching={props.movie.get("fetchingDetails")}
        movieId={props.movie.get("imdb_id")}
        getDetails={props.getMovieDetails}
        deleteMovie={props.deleteMovie}
        hasMovie={hasMovie}
        wishlisted={props.movie.get("wishlisted")}
        addToWishlist={props.addToWishlist}
        deleteFromWishlist={props.deleteFromWishlist}
        lastFetchUrl={props.lastFetchUrl}
      />

    {props.movie.get("torrents") !== null &&
        <TorrentsButton
          torrents={props.movie.get("torrents")}
          addTorrent={props.addTorrent}
        />
    }

    <DownloadButton
      url={props.movie.get("polochon_url")}
      subtitles={props.movie.get("subtitles")}
    />

  {props.movie.get("polochon_url") !== "" &&
    <SubtitlesButton
      fetching={props.movie.get("fetchingSubtitles")}
      subtitles={props.movie.get("subtitles")}
      refreshSubtitles={props.refreshSubtitles}
      resourceID={props.movie.get("imdb_id")}
      type="movie"
    />
  }

    <ImdbButton imdbId={props.movie.get("imdb_id")} size="sm"/>
  </div>
  );
}

class MovieList extends React.PureComponent {
  constructor(props) {
    super(props);
  }
  render() {
    let selectedMovie = undefined;
    if (this.props.movies !== undefined && this.props.movies.has(this.props.selectedImdbId)) {
      selectedMovie = this.props.movies.get(this.props.selectedImdbId);
    }

    return (
      <div className="row" id="container">
        <ListPosters
          data={this.props.movies}
          type="movies"
          placeHolder="Filter movies..."
          exploreOptions={this.props.exploreOptions}
          selectedImdbId={this.props.selectedImdbId}
          updateFilter={this.props.updateFilter}
          filter={this.props.filter}
          onClick={this.props.selectMovie}
          params={this.props.params}
          router={this.props.router}
          loading={this.props.loading}
        />
        {selectedMovie !== undefined &&
          <ListDetails data={selectedMovie}>
            <MovieButtons
              movie={selectedMovie}
              getMovieDetails={this.props.getMovieDetails}
              addTorrent={this.props.addTorrent}
              deleteMovie={this.props.deleteMovie}
              addToWishlist={this.props.addMovieToWishlist}
              deleteFromWishlist={this.props.deleteMovieFromWishlist}
              lastFetchUrl={this.props.lastFetchUrl}
              refreshSubtitles={this.props.refreshSubtitles}
            />
          </ListDetails>
        }
      </div>
    );
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(MovieList);