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

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

import { inLibrary } 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,
};

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..."
        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}>
        <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,
  updateFilter: PropTypes.func,
  selectMovie: PropTypes.func,
  match: PropTypes.object,
};

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