import React, { Component } from 'react';

import { translate } from '../../base/i18n';
import {
    getHoursCount,
    getMinutesCount,
    getSecondsCount
} from '../../base/util/timeUtils';

/**
 * React component for displaying total time elapsed. Converts a total count of
 * milliseconds into a more humanized form: "# hours, # minutes, # seconds".
 * With a time of 0, "0s" will be displayed.
 *
 * @extends Component
 */
class TimeElapsed extends Component {
    /**
     * TimeElapsed component's property types.
     *
     * @static
     */
    static propTypes = {
        /**
         * The function to translate human-readable text.
         */
        t: React.PropTypes.func,

        /**
         * The milliseconds to be converted into a humanized format.
         */
        time: React.PropTypes.number
    }

    /**
     * Implements React's {@link Component#render()}.
     *
     * @inheritdoc
     * @returns {ReactElement}
     */
    render() {
        const hours = getHoursCount(this.props.time);
        const minutes = getMinutesCount(this.props.time);
        const seconds = getSecondsCount(this.props.time);
        const timeElapsed = [];

        if (hours) {
            const hourPassed = this._createTimeDisplay(hours,
                'speakerStats.hours', 'hours');

            timeElapsed.push(hourPassed);
        }

        if (hours || minutes) {
            const minutesPassed = this._createTimeDisplay(minutes,
                'speakerStats.minutes', 'minutes');

            timeElapsed.push(minutesPassed);
        }

        const secondsPassed = this._createTimeDisplay(seconds,
            'speakerStats.seconds', 'seconds');

        timeElapsed.push(secondsPassed);

        return (
            <div>
                { timeElapsed }
            </div>
        );
    }

    /**
     * Returns a ReactElement to display the passed in count and a count noun.
     *
     * @private
     * @param {number} count - The number used for display and to check for
     * count noun plurality.
     * @param {string} countNounKey - Translation key for the time's count noun.
     * @param {string} countType - What is being counted. Used as the element's
     * key for react to iterate upon.
     * @returns {ReactElement}
     */
    _createTimeDisplay(count, countNounKey, countType) {
        const { t } = this.props;

        return (
            <span key = { countType } > { t(countNounKey, { count }) } </span>
        );
    }

}

export default translate(TimeElapsed);