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

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

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

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,
  showWishlistToggle,
  getShowDetails,
  updateFilter
};

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

  let selectedShow = Map();
  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}
      />
      <ListDetails
        data={selectedShow}
        loading={props.loading}
        wishlist={() =>
          props.showWishlistToggle(
            isWishlisted(selectedShow),
            selectedShow.get("imdb_id")
          )
        }
      >
        <span>
          <button
            onClick={() => showDetails(selectedShow.get("imdb_id"))}
            className="btn btn-primary btn-sm w-md-100"
          >
            <i className="fa fa-external-link mr-1" />
            Details
          </button>
        </span>
      </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,
  showWishlistToggle: PropTypes.func,
  selectShow: PropTypes.func,
  getShowDetails: PropTypes.func,
  updateFilter: PropTypes.func
};
export default connect(mapStateToProps, mapDispatchToProps)(ShowList);