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

const MoviesRoute = ({ component: Component, fetchMovies, ...otherProps }) => {
  return (
    <Route
      {...otherProps}
      render={(props) => {
        let fetchUrl = "";
        switch (props.match.path) {
          case "/movies/polochon":
            fetchUrl = "/movies/polochon";
            break;
          case "/movies/wishlist":
            fetchUrl = "/wishlist/movies";
            break;
          case "/movies/search/:search":
            fetchUrl = "/movies/search/" + props.match.params.search;
            break;
          case "/movies/explore/:source/:category":
            fetchUrl =
              "/movies/explore?source=" +
              encodeURI(props.match.params.source) +
              "&category=" +
              encodeURI(props.match.params.category);
            break;
          default:
            break;
        }

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

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

export default connect(null, { fetchMovies })(MoviesRoute);