import React from "react";
import PropTypes from "prop-types";

import { prettySize, upperCaseFirst } from "../../../utils";

export const Progress = ({ torrent }) => {
  const downloading = torrent.status.state === "downloading";
  let progressBarClass = torrent.status.is_finished
    ? "progress-bar bg-success"
    : "progress-bar bg-info";
  if (torrent.status.state === "downloading") {
    progressBarClass += " progress-bar-striped progress-bar-animated";
  }

  var percentDone = torrent.status.percent_done;
  const started = percentDone !== 0;
  if (started) {
    percentDone = Number(percentDone).toFixed(1) + "%";
  }

  // Pretty sizes
  const downloadedSize = prettySize(torrent.status.downloaded_size);
  const totalSize = prettySize(torrent.status.total_size);
  const downloadRate = prettySize(torrent.status.download_rate) + "/s";
  return (
    <div>
      <div className="progress bg-light">
        <div
          className={progressBarClass}
          style={{ width: percentDone }}
          role="progressbar"
          aria-valuenow={percentDone}
          aria-valuemin="0"
          aria-valuemax="100"
        ></div>
      </div>
      {downloading && (
        <p>
          {downloadedSize} / {totalSize} - {percentDone} - {downloadRate}
        </p>
      )}
      {!downloading && (
        <p className="text-muted">
          <small>{upperCaseFirst(torrent.status.state)}</small>
        </p>
      )}
    </div>
  );
};
Progress.propTypes = {
  torrent: PropTypes.object.isRequired,
};