//
// Variables
//

var countdown;


//
// Methods
//

/**
 * Play an alarm sound
 */
var alarm = function () {
    var alarm = new Audio('https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/Yodel_Sound_Effect.mp3');
    alarm.play();
};

/**
 * Add a leading 0 if none exists
 * @param  {Integer} num The number to pad
 * @return {String}      The padded number
 */
var padLeft = function (num) {
    if (num.toString().length < 2) {
        return `0${num}`;
    }
    return num;
};

/**
 * Reset the timer
 */
var reset = function () {
    timer.data.time = 1500;
};

var tick = function () {

    // Update the timer
    timer.data.time--;
    timer.data.running = true;

    // If the timer reaches zero, stop and sound an alarm
    if (timer.data.time === 0) {
        stop();
        alarm();
    }

};

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

    // If the timer is at 0, reset it
    if (timer.data.time === 0) {
        reset();
    }

    // Start the timer
    tick();

    // Update the timer once a second
    countdown = window.setInterval(tick, 1000);

};

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

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

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

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

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

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

};


//
// Inits & Event Listeners
//

// Create the timer
var timer = new Reef('#app', {
    data: {
        time: 1500,
        running: false
    },
    template: function (props) {
        return `
            <div id="timer">
                ${parseInt(props.time / 60, 10).toString() + ':' + padLeft(props.time % 60)}
            </div>
            <p>
                <button data-action="${props.running ? 'stop' : 'start'}">${props.running ? 'Pause' : 'Start'}</button>
                <button data-action="clear">Reset</button>
            </p>`;
    }
});

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

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