import React from "react"
import PropTypes from "prop-types"
import { Map } from "immutable"
import { connect } from "react-redux"
import { selectShow, addShowToWishlist,
  deleteShowFromWishlist, getShowDetails, updateFilter } from "../../actions/shows"

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

function mapStateToProps(state) {
  return {
    loading : state.showsStore.get("loading"),
    shows : state.showsStore.get("shows"),
    filter : state.showsStore.get("filter"),
    selectedImdbId : state.showsStore.get("selectedImdbId"),
    exploreOptions : state.showsStore.get("exploreOptions"),
  };
}
const mapDispatchToProps = {
  selectShow, addShowToWishlist, deleteShowFromWishlist,
  getShowDetails, updateFilter,
};

const ShowList = (props) => {
  const showDetails = (imdbId) => {
    props.history.push("/shows/details/" + imdbId);
  }

  let selectedShow;
  if (props.selectedImdbId !== "") {
    selectedShow = props.shows.get(props.selectedImdbId);
  }

  return (
    <div className="row" id="container">
      <ListPosters
        data={props.shows}
        type="shows"
        placeHolder="Filter shows..."
        exploreOptions={props.exploreOptions}
        updateFilter={props.updateFilter}
        selectedImdbId={props.selectedImdbId}
        filter={props.filter}
        onClick={props.selectShow}
        onDoubleClick={showDetails}
        onKeyEnter={showDetails}
        params={props.match.params}
        loading={props.loading}
      />
      {selectedShow &&
          <ListDetails data={selectedShow} loading={props.loading}>
            <ShowButtons
              show={selectedShow}
              deleteFromWishlist={props.deleteShowFromWishlist}
              addToWishlist={props.addShowToWishlist}
              getDetails={props.getShowDetails}
              updateFilter={props.updateFilter}
            />
          </ListDetails>
      }
    </div>
  );
}
ShowList.propTypes = {
  match: PropTypes.object,
  history: PropTypes.object,
  shows: PropTypes.instanceOf(Map),
  exploreOptions: PropTypes.instanceOf(Map),
  selectedImdbId: PropTypes.string,
  filter: PropTypes.string,
  loading: PropTypes.bool,
  deleteShowFromWishlist: PropTypes.func,
  addShowToWishlist: PropTypes.func,
  selectShow: PropTypes.func,
  getShowDetails: PropTypes.func,
  updateFilter: PropTypes.func,
};
export default connect(mapStateToProps, mapDispatchToProps)(ShowList);