let {store, component} = reef;

// Create reactive store
let data = store({
    time: 1500,
    running: false
});

// Track counter
let countdown;

/**
 * Template
 */
function template () {
    return `
        <div id="timer">
            ${parseInt(data.time / 60, 10).toString() + ':' + (data.time % 60).toString().padStart(2, '0')}
        </div>
        <p>
            <button data-action="${data.running ? 'stop' : 'start'}">${data.running ? 'Pause' : 'Start'}</button>
            <button data-action="clear">Reset</button>
        </p>`;
}

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

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

/**
 * Count timer down by 1
 */
function tick () {

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

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

}

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

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

    // Start the timer
    tick();

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

}

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

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

    // Check if a timer action button was clicked
    let 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();
    }

}

// Render the timer into the DOM
component('#app', template);

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