import React from 'react';
import { Typography } from '..';
import { TimerProps } from '../../interfaces';
import { TimerBase } from './styles';

const Timer: React.FC<TimerProps> = ({ currentTime }) => {
  return (
    <TimerBase>
      <Typography variant="h3">
        {formatMinutes(currentTime)} : {formatSeconds(currentTime)}
      </Typography>
    </TimerBase>
  );
};

export default Timer;

const formatMinutes = (currentTime: number) => {
  const numMinutes = Math.floor(currentTime / MILLISECONDS_PER_MINUTE);
  return numMinutes > 0 ? formatDoubleDigitString(numMinutes) : '00';
};

const formatSeconds = (currentTime: number) => {
  const numMinutes = Math.floor(currentTime / MILLISECONDS_PER_MINUTE);
  const seconds = Math.round(
    (currentTime - numMinutes * MILLISECONDS_PER_MINUTE) /
      MILLISECONDS_PER_SECONDS
  );
  return formatDoubleDigitString(seconds);
};

const formatDoubleDigitString = (number: number) => {
  const stringNum = number.toString();
  return stringNum.length === 1 ? `0${stringNum}` : stringNum;
};

const MILLISECONDS_PER_MINUTE = 60000;
const MILLISECONDS_PER_SECONDS = 1000;