let {signal, component} = reef;

// Create signals
let time = signal(0);
let running = signal(false);

// Placeholder variable for the timer
let timer;

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

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

    // Render immediately
    running.value = true;

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

}

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

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

/**
 * Create template
 * @return {[type]} [description]
 */
function template () {
    return `
        <div id="stopwatch">
            ${formatTime(time.value)}
        </div>
        <p>
            <button onclick="start()" ${running.value ? 'hidden' : ''}>Start</button>
            <button onclick="stop()" ${running.value ? '' : 'hidden'}>Stop</button>
            <button onclick="reset">Reset</button>
        </p>`;
}

// Create the component
component('#app', template, {events: {start, stop, reset}});