import React from "react";
import PropTypes from "prop-types";
import { useDispatch, useSelector } from "react-redux";

import { getEpisodeDetails } from "../../../actions/shows";

import { TorrentsButton } from "../../buttons/torrents";
import { prettyEpisodeName } from "../../../utils";

export const EpisodeTorrentsButton = ({ season, episode }) => {
  const dispatch = useDispatch();

  const imdbId = useSelector((state) => state.show.show.imdb_id);
  const search = () => {
    dispatch(getEpisodeDetails(imdbId, season, episode));
  };
  const searching = useSelector((state) =>
    state.show.show.seasons.get(season).get(episode).fetching
      ? state.show.show.seasons.get(season).get(episode).fetching
      : false
  );
  const torrents = useSelector((state) =>
    state.show.show.seasons.get(season).get(episode).torrents
      ? state.show.show.seasons.get(season).get(episode).torrents
      : []
  );

  const url = useSelector(
    (state) =>
      "#/torrents/search/shows/" +
      encodeURI(prettyEpisodeName(state.show.show.title, season, episode))
  );

  return (
    <TorrentsButton
      torrents={torrents}
      searching={searching}
      search={search}
      url={url}
    />
  );
};
EpisodeTorrentsButton.propTypes = {
  episode: PropTypes.number.isRequired,
  season: PropTypes.number.isRequired,
};