import React from "react"
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"),
    lastFetchUrl : state.showsStore.get("lastFetchUrl"),
    exploreOptions : state.showsStore.get("exploreOptions"),
  };
}
const mapDispatchToProps = {
  selectShow, addShowToWishlist, deleteShowFromWishlist,
  getShowDetails, updateFilter,
};

class ShowList extends React.PureComponent {
  constructor(props) {
    super(props);
    this.showDetails = this.showDetails.bind(this);
  }

  showDetails(imdbId) {
    return this.props.history.push("/shows/details/" + imdbId);
  }

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

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