import React from "react";
import { connect } from "react-redux";
import { getTimeObj } from "../../utils";

import { TOGGLE_TIME_MODE } from "../../actionTypes";

const Time = ({ timeElapsed, length, timeMode, toggleTimeMode }) => {
  const seconds = timeMode === "ELAPSED" ? timeElapsed : length - timeElapsed;

  const timeObj = getTimeObj(seconds);
  return (
    <div id="time" onClick={toggleTimeMode} className="countdown">
      {timeMode === "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>
  );
};

const mapStateToProps = state => state.media;
const mapDispatchToProps = dispatch => ({
  toggleTimeMode: () => dispatch({ type: TOGGLE_TIME_MODE })
});

export default connect(mapStateToProps, mapDispatchToProps)(Time);