import React from "react";
import PropTypes from "prop-types";
import { useSelector } from "react-redux";
import { useHistory } from "react-router-dom";

export const DownloadProgress = ({ imdbId, season, episode }) => {
  let history = useHistory();
  const torrentGroup = useSelector((state) =>
    state.torrents.torrents.get(imdbId)
  );
  if (!torrentGroup || torrentGroup.length === 0) {
    return null;
  }

  let torrent;
  const type = torrentGroup[0].type;
  switch (type) {
    case "movie":
      torrent = torrentGroup[0];
      break;
    case "episode": {
      if (!season || !episode) {
        return null;
      }

      const torrents = torrentGroup.filter(
        (torrent) => torrent.episode === episode && torrent.season === season
      );
      if (torrents.length !== 1) {
        return null;
      }
      torrent = torrents[0];

      break;
    }
    default:
      return null;
  }

  if (!torrent || !torrent.status) {
    return null;
  }

  const progress = Number(torrent.status.percent_done).toFixed(1);
  if (progress === 0) {
    return null;
  }

  const handleClick = () => {
    history.push("/torrents/list");
  };

  return (
    <div className="w-100 mt-n2 clickable" onClick={handleClick}>
      <small className="text text-muted">Downloading...</small>
      <div
        className="progress"
        style={{
          height: "0.2rem",
        }}
      >
        <div
          className="progress-bar bg-warning"
          style={{
            width: `${progress}%`,
          }}
        />
      </div>
    </div>
  );
};

DownloadProgress.propTypes = {
  imdbId: PropTypes.string.isRequired,
  season: PropTypes.number,
  episode: PropTypes.number,
};