import React from "react";
import * as Utils from "../../utils";

import * as Actions from "../../actionCreators";
import * as Selectors from "../../selectors";
import { TIME_MODE } from "../../constants";
import { useActionCreator, useTypedSelector } from "../../hooks";

const Time = React.memo(() => {
  const toggleTimeMode = useActionCreator(Actions.toggleTimeMode);
  const timeElapsed = useTypedSelector(Selectors.getTimeElapsed);
  const duration = useTypedSelector(Selectors.getDuration) || 0;
  const timeMode = useTypedSelector(Selectors.getTimeMode);
  const seconds =
    timeMode === TIME_MODE.ELAPSED ? timeElapsed : duration - timeElapsed;

  const timeObj = Utils.getTimeObj(seconds);
  return (
    <div id="time" onClick={toggleTimeMode} className="countdown">
      {timeMode === TIME_MODE.REMAINING && <div id="minus-sign" />}
      <div
        id="minute-first-digit"
        className={`digit digit-${timeObj.minutesFirstDigit}`}
      />
      <div
        id="minute-second-digit"
        className={`digit digit-${timeObj.minutesSecondDigit}`}
      />
      <div
        id="second-first-digit"
        className={`digit digit-${timeObj.secondsFirstDigit}`}
      />
      <div
        id="second-second-digit"
        className={`digit digit-${timeObj.secondsSecondDigit}`}
      />
    </div>
  );
});

export default Time;