//
// Variables
//

var stopwatch, timer;


//
// Methods
//

/**
 * Format the time in seconds into hours, minutes, and seconds
 * @param  {Number} time The time in seconds
 * @return {String}      The time in hours, minutes, and seconds
 */
var formatTime = function (time) {
    var minutes = parseInt(time / 60, 10);
    var hours = parseInt(minutes / 60, 10);
    if (minutes > 59) {
        minutes = minutes % 60;
    }
    return (hours > 0 ? hours + 'h ' : '') + (minutes > 0 || hours > 0 ? minutes + 'm ' : '') + (time % 60) + 's';
};

/**
 * Setup the stopwatch on page load
 */
var setup = function () {

    // Create the stopwatch
    stopwatch = new Reef('#app', {
        data: {
            time: 0,
            running: false
        },
        template: function (props) {
            return `
                <div id="stopwatch">
                    ${formatTime(props.time)}
                </div>
                <p>
                    <button data-stopwatch="${props.running ? 'stop' : 'start'}">${props.running ? 'Stop' : 'Start'}</button>
                    <button data-stopwatch="reset">Reset</button>
                </p>`;
        }
    });

    // Render the stopwatch into the DOM
    stopwatch.render();

};

/**
 * Start the stopwatch
 */
var start = function () {

    // Render immediately
    stopwatch.data.running = true;

    // Update the timer once a second
    timer = window.setInterval(function () {
        stopwatch.data.time++;
    }, 1000);

};

/**
 * Stop the stopwatch
 */
var stop = function () {
    window.clearInterval(timer);
    stopwatch.data.running = false;
};

/**
 * Reset the stopwatch
 */
var reset = function () {
    stopwatch.data.time = 0;
    stop();
};

/**
 * Handle click events
 */
var clickHandler = function (event) {

    // Check if a stopwatch action button was clicked
    var action = event.target.getAttribute('data-stopwatch');
    if (!action) return;

    // If it's the start button, start
    if (action === 'start') {
        start();
        return;
    }

    // If it's the stop button, stop
    if (action === 'stop') {
        stop();
        return;
    }

    // If it's the stopwatch button, reset
    if (action === 'reset') {
        reset();
    }

};


//
// Inits & Event Listeners
//

// Setup the app
setup();

// Listen for clicks
document.addEventListener('click', clickHandler, false);