/**
 * React Component for displaying the bonus time remaining.
 */
import * as React from "react";
import { Gang } from "../Gang";
import { CONSTANTS } from "../../Constants";
import { convertTimeMsToTimeElapsedString } from "../../../utils/StringHelperFunctions";

interface IProps {
  gang: Gang;
}

export function BonusTime(props: IProps): React.ReactElement {
  const CyclerPerSecond = 1000 / CONSTANTS._idleSpeed;
  if ((props.gang.storedCycles / CyclerPerSecond) * 1000 <= 5000) return <></>;
  const bonusMillis = (props.gang.storedCycles / CyclerPerSecond) * 1000;
  return (
    <>
      <p className="tooltip" style={{ display: "inline-block" }}>
        Bonus time: {convertTimeMsToTimeElapsedString(bonusMillis)}
        <span className="tooltiptext noselect">
          You gain bonus time while offline or when the game is inactive (e.g. when the tab is throttled by the
          browser). Bonus time makes the Gang mechanic progress faster, up to 5x the normal speed.
        </span>
      </p>
      <br />
    </>
  );
}
