import React from "react";
import { connect } from "react-redux";
import { TimeMode, AppState, Dispatch } from "../../types";
import { getTimeObj } from "../../utils";

import * as Actions from "../../actionCreators";
import { TIME_MODE } from "../../constants";

interface StateProps {
  timeElapsed: number;
  length: number;
  timeMode: TimeMode;
}

interface DispatchProps {
  toggleTimeMode(): void;
}

const Time = ({
  timeElapsed,
  length,
  timeMode,
  toggleTimeMode
}: StateProps & DispatchProps) => {
  const seconds =
    timeMode === TIME_MODE.ELAPSED ? timeElapsed : length - timeElapsed;

  const timeObj = 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>
  );
};

const mapStateToProps = (state: AppState): StateProps => {
  const { timeElapsed, length, timeMode } = state.media;
  return { timeElapsed, length: length || 0, timeMode };
};
const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
  toggleTimeMode: () => dispatch(Actions.toggleTimeMode())
});

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