import React from "react";
import PropTypes from "prop-types";
import { Route } from "react-router-dom";
import { connect } from "react-redux";
import {
  fetchShows,
  fetchShowDetails,
  getShowExploreOptions,
} from "../../actions/shows";

const mapStateToProps = (state) => ({
  isExplorerFetched: state.showsStore.get("exploreOptions").size !== 0,
});
const mapDispatchToProps = {
  fetchShows,
  fetchShowDetails,
  getShowExploreOptions,
};

const ShowsRoute = ({
  component: Component,
  isExplorerFetched,
  fetchShows,
  fetchShowDetails,
  getShowExploreOptions,
  ...otherProps
}) => {
  return (
    <Route
      {...otherProps}
      render={(props) => {
        let fetchUrl = "";
        switch (props.match.path) {
          case "/shows/polochon":
            fetchUrl = "/shows/polochon";
            break;
          case "/shows/wishlist":
            fetchUrl = "/wishlist/shows";
            break;
          case "/shows/search/:search":
            fetchUrl = "/shows/search/" + props.match.params.search;
            break;
          case "/shows/explore/:source/:category":
            if (!isExplorerFetched) {
              getShowExploreOptions();
            }
            fetchUrl =
              "/shows/explore?source=" +
              encodeURI(props.match.params.source) +
              "&category=" +
              encodeURI(props.match.params.category);
            break;
          case "/shows/details/:imdbId":
            fetchShowDetails(props.match.params.imdbId);
            fetchUrl = "";
        }

        if (fetchUrl != "") {
          fetchShows(fetchUrl);
        }

        return <Component {...props} />;
      }}
    />
  );
};
ShowsRoute.propTypes = {
  component: PropTypes.object,
  match: PropTypes.object,
  isExplorerFetched: PropTypes.bool.isRequired,
  fetchShows: PropTypes.func.isRequired,
  fetchShowDetails: PropTypes.func.isRequired,
  getShowExploreOptions: PropTypes.func.isRequired,
};

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