import "./Misc.sass";
import {WithChildren} from "../Shared";
import {Values} from "../../models/Shared";

export function TitleLine({children}: WithChildren) {
  return (
    <div className="TitleLine">{children}</div>
  );
}

interface ValueProps {
  raw: Values | number
  valueKey: keyof Values
}

export function Value({raw, valueKey}: ValueProps): JSX.Element | null {
  const actual = typeof raw === "number" ? raw : (raw[valueKey]);

  if (actual !== null && actual !== undefined) {
    if (valueKey === "time") {
      const minutes = Math.floor(actual / 60).toString(10).padStart(2, "0");
      const seconds = (actual % 60).toString(10).padStart(2, "0");

      return <><strong>{minutes}</strong>'<strong>{seconds}</strong>"</>;
    }

    if (valueKey === "calories") {
      return <><strong>{actual}</strong> kcal</>;
    }

    if (valueKey === "distance") {
      const km = actual / 1000;

      return <><strong>{km.toFixed(1)}</strong> km</>;
    }

    if (valueKey === "level") {
      return <><strong>{actual}</strong> lvl</>;
    }
  }

  return null;
}