import React from "react";
import PropTypes from "prop-types";
import { OrderedMap, Map } from "immutable";
import { connect } from "react-redux";
import {
  selectMovie,
  updateFilter,
  movieWishlistToggle,
  fetchMovies,
  getMovieExploreOptions,
} from "../../actions/movies";

import ListDetails from "../list/details";
import ListPosters from "../list/posters";

import { inLibrary, isWishlisted } from "../../utils";

import { ShowMore } from "../buttons/showMore";

import { MovieSubtitlesButton } from "./subtitlesButton";
import { MovieTorrentsButton } from "./torrentsButton";

function mapStateToProps(state) {
  return {
    loading: state.movieStore.get("loading"),
    movies: state.movieStore.get("movies"),
    filter: state.movieStore.get("filter"),
    selectedImdbId: state.movieStore.get("selectedImdbId"),
    exploreOptions: state.movieStore.get("exploreOptions"),
  };
}
const mapDispatchToProps = {
  selectMovie,
  updateFilter,
  movieWishlistToggle,
  fetchMovies,
  getMovieExploreOptions,
};

const MovieList = (props) => {
  let selectedMovie = Map();
  if (props.movies !== undefined && props.movies.has(props.selectedImdbId)) {
    selectedMovie = props.movies.get(props.selectedImdbId);
  }

  return (
    <div className="row">
      <ListPosters
        data={props.movies}
        type="movies"
        placeHolder="Filter movies..."
        exploreFetchOptions={props.getMovieExploreOptions}
        exploreOptions={props.exploreOptions}
        selectedImdbId={props.selectedImdbId}
        updateFilter={props.updateFilter}
        filter={props.filter}
        onClick={props.selectMovie}
        onDoubleClick={function () {
          return;
        }}
        onKeyEnter={function () {
          return;
        }}
        params={props.match.params}
        loading={props.loading}
      />
      <ListDetails
        data={selectedMovie}
        loading={props.loading}
        wishlist={() =>
          props.movieWishlistToggle(
            selectedMovie.get("imdb_id"),
            isWishlisted(selectedMovie)
          )
        }
      >
        <ShowMore
          id={selectedMovie.get("imdb_id")}
          inLibrary={inLibrary(selectedMovie)}
        >
          <MovieTorrentsButton
            torrents={selectedMovie.get("torrents")}
            imdbId={selectedMovie.get("imdb_id")}
            title={selectedMovie.get("title")}
            searching={selectedMovie.get("fetchingDetails", false)}
          />
          <MovieSubtitlesButton
            subtitles={selectedMovie.get("subtitles")}
            inLibrary={inLibrary(selectedMovie)}
            imdbId={selectedMovie.get("imdb_id")}
            searching={selectedMovie.get("fetchingSubtitles", false)}
          />
        </ShowMore>
      </ListDetails>
    </div>
  );
};
MovieList.propTypes = {
  movies: PropTypes.instanceOf(OrderedMap),
  exploreOptions: PropTypes.instanceOf(Map),
  selectedImdbId: PropTypes.string,
  filter: PropTypes.string,
  loading: PropTypes.bool,
  fetchMovies: PropTypes.func,
  getMovieExploreOptions: PropTypes.func,
  updateFilter: PropTypes.func,
  movieWishlistToggle: PropTypes.func,
  selectMovie: PropTypes.func,
  match: PropTypes.object,
};

export default connect(mapStateToProps, mapDispatchToProps)(MovieList);