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

import { searchEpisodeSubtitles } from "../../../actions/subtitles";

import { SubtitlesButton } from "../../buttons/subtitles";

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

  const imdbId = useSelector((state) => state.show.show.imdb_id);
  const searching = useSelector((state) =>
    state.show.show.seasons.get(season).get(episode).fetchingSubtitles
      ? state.show.show.seasons.get(season).get(episode).fetchingSubtitles
      : false
  );
  const inLibrary = useSelector(
    (state) =>
      state.show.show.seasons.get(season).get(episode).polochon_url !== ""
  );
  const subtitles = useSelector((state) =>
    state.show.show.seasons.get(season).get(episode).subtitles
      ? state.show.show.seasons.get(season).get(episode).subtitles
      : []
  );

  const search = () => {
    dispatch(searchEpisodeSubtitles(imdbId, season, episode));
  };

  return (
    <SubtitlesButton
      subtitles={subtitles}
      inLibrary={inLibrary}
      searching={searching}
      search={search}
    />
  );
};

EpisodeSubtitlesButton.propTypes = {
  season: PropTypes.number.isRequired,
  episode: PropTypes.number.isRequired,
};