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

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

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

  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 className="card-body pb-0">
      {started && (
        <>
          <div className="progress bg-light">
            <div
              className={progressBarClass}
              style={{ width: percentDone }}
              role="progressbar"
              aria-valuenow={percentDone}
              aria-valuemin="0"
              aria-valuemax="100"
            ></div>
          </div>
          <p>
            {downloadedSize} / {totalSize} - {percentDone} - {downloadRate}
          </p>
        </>
      )}
      {!started && <p>Download not yet started</p>}
    </div>
  );
};
Progress.propTypes = {
  torrent: PropTypes.object.isRequired,
};