import approx from "approximate-number";
import classNames from "classnames";
import React from "react";
import { convertSecondsToFormattedTime } from "../../../../util/date-time";

const TaskComponent = ({ task, flopsLeft }) => {
  let icon;
  let progressBarContent;
  let percent;
  let infoTitle;

  if (flopsLeft === task.totalFlopCount) {
    icon = "hourglass-half";
    progressBarContent = "";
    percent = 0;
    infoTitle = "Not submitted yet";
  } else if (flopsLeft > 0) {
    icon = "refresh";
    progressBarContent = approx(task.totalFlopCount - flopsLeft) + " FLOP";
    percent = 100 * (task.totalFlopCount - flopsLeft) / task.totalFlopCount;
    infoTitle =
      progressBarContent + " (" + Math.round(percent * 10) / 10 + "%)";
  } else {
    icon = "check";
    progressBarContent = "Completed";
    percent = 100;
    infoTitle = "Completed";
  }

  return (
    <li className="list-group-item flex-column align-items-start">
      <div className="d-flex w-100 justify-content-between">
        <h5 className="mb-1">{approx(task.totalFlopCount)} FLOP</h5>
        <small>Starts at {convertSecondsToFormattedTime(task.startTick)}</small>
      </div>
      <div title={infoTitle} style={{ display: "flex" }}>
        <span
          className={classNames("fa", "fa-" + icon)}
          style={{ width: "20px" }}
        />
        <div className="progress" style={{ flexGrow: 1 }}>
          <div
            className="progress-bar"
            role="progressbar"
            aria-valuenow={percent}
            aria-valuemin="0"
            aria-valuemax="100"
            style={{ width: percent + "%" }}
          >
            {progressBarContent}
          </div>
        </div>
      </div>
    </li>
  );
};

export default TaskComponent;