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

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

class Time extends React.Component {
  constructor(props) {
    super(props);
    this.toggleTimeMode = this.toggleTimeMode.bind(this);
  }
  toggleTimeMode() {
    this.props.dispatch({type: TOGGLE_TIME_MODE});
  }
  render() {
    const seconds = this.props.timeMode === 'ELAPSED' ?
      this.props.timeElapsed :
      this.props.length - this.props.timeElapsed;

    const timeObj = getTimeObj(seconds);
    return <div id='shade-time' onClick={this.toggleTimeMode} className='countdown'>
      <Character id='shade-minus-sign'>{this.props.timeMode === 'REMAINING' ? '-' : ''}</Character>
      <Character id='shade-minute-first-digit'>{timeObj.minutesFirstDigit}</Character>
      <Character id='shade-minute-second-digit'>{timeObj.minutesSecondDigit}</Character>
      <Character id='shade-second-first-digit'>{timeObj.secondsFirstDigit}</Character>
      <Character id='shade-second-second-digit'>{timeObj.secondsSecondDigit}</Character>
    </div>;
  }
}

export default connect((state) => state.media)(Time);