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

const ShowsRoute = ({ component: Component, fetchShows, ...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":
            fetchUrl =
              "/shows/explore?source=" +
              encodeURI(props.match.params.source) +
              "&category=" +
              encodeURI(props.match.params.category);
            break;
        }

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

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

export default connect(null, {
  fetchShows,
})(ShowsRoute);