import React, { Component, PropTypes } from 'react';
// eslint-disable-next-line no-unused-vars
import momentDurationFormat from 'moment-duration-format';
import moment from 'moment';
import getMoment from '../../helpers/time';

class FormatTime extends Component {

    getTimeDiff(time, now) {
        if (this.props.durationInterval && this.props.durationFormat) {
            return moment
                .duration(time.diff(now), this.props.durationInterval)
                .format(this.props.durationFormat, { forceLength: true });
        }

        return time.from(now);
    }

    render() {
        const time = getMoment(this.props.time);
        const now = getMoment(this.props.now);
        const format = this.props.timeFormat;

        if (this.props.display === 'relative') {
            return (
              <div className="dotted" title={ time.format(format) }>
                {this.getTimeDiff(time, now)}
              </div>
            );
        }

        return (
          <div className="dotted" title={ this.getTimeDiff(time, now) }>
            {time.format(format)}
          </div>
        );
    }
}

FormatTime.defaultProps = {
    time: null,
    now: 'now',
    display: 'relative',
    timeFormat: 'DD-MM-YYYY H:mm:ss',
    durationInterval: null,
    durationFormat: null,
};

FormatTime.propTypes = {
    time: PropTypes.number.isRequired,
    now: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.number,
    ]),
    display: PropTypes.string.isRequired,
    timeFormat: PropTypes.string.isRequired,
    durationInterval: PropTypes.string,
    durationFormat: PropTypes.string,
};

export default FormatTime;

@@ -817,35 +817,36 @@
 %0A              %3C
-div
+span
  className=%22dott
@@ -934,35 +934,36 @@
               %3C/
-div
+span
 %3E%0A            );
@@ -1002,19 +1002,20 @@
        %3C
-div
+span
  classNa
@@ -1115,11 +1115,12 @@
   %3C/
-div
+span
 %3E%0A  

Fix dotted underline.