// function to add '0' to numbers < 10 in time values 
function fixTimeFormat(timeUnit) {        
    return timeUnit < 10 ? `0${timeUnit}` : timeUnit
}
// change default Date() output into object of required date format
const dateConvertor = (date = new Date()) => {
    // when date not specified set actual time as default parameter
    const weekdays = [
        'Monday',
        'Tuesday',
        'Wednesday',
        'Thursday',
        'Friday',
        'Saturday',
        'Sunday'
    ]
    const months = [
        'January',
        'February',
        'March',
        'April',
        'May',
        'June',
        'July',
        'August',
        'September',
        'October',
        'November',
        'December'
    ]
    
    return {
        second: fixTimeFormat(date.getSeconds()),
        minute: fixTimeFormat(date.getMinutes()),
        hour: fixTimeFormat(date.getHours()),
        day: weekdays[date.getDay() - 1], // days index starts with 1
        month: months[date.getMonth()], // monts index starts with 0
        gmt: date.getTimezoneOffset / (-60) >= 0 ? `GMT+${date.getTimezoneOffset() / 60}` : `GMT${date.getTimezoneOffset() / 60}`
    }
}
// converts milliseconds into object of commonly used time values 
const timeConvertor = (tims) => {
    const second = 1 * 1000
    const minute = 60 * second
    const hour = 60 * minute
    const day = 24 * hour
    const year = 365 * day   
    
    const timeObject = {
        second: Math.floor( tims % minute / second ),
        minute: Math.floor( tims % hour / minute ),
        hour: Math.floor( tims % day / hour ),
        day: Math.floor( tims % year / day ),
        year: Math.floor( tims / year)
    }

    for (const key in timeObject) {
        timeObject[key] = fixTimeFormat(timeObject[key])
    }
        
    return timeObject
}
// countdown props
const countdown = {
    day: document.getElementById("days").children,
    hour: document.getElementById("hrs").children,
    minute: document.getElementById("mins").children,
    second: document.getElementById("secs").children
}


function main() {    
// selectors
const timeInfo = document.getElementById("date")
const timeClock = document.querySelector('.time-clock')
const timeMsg = document.getElementById("time-msg")
// end of countdown inicialization
const futureTime = new Date(2020,9,16,15,52,00);
let ticktock = true
// end date template
let endDate = dateConvertor(futureTime)
timeInfo.innerHTML = `${endDate.day}, ${endDate.month} at ${(endDate.hour)}:${(endDate.minute)}:${(endDate.second)} ${endDate.gmt}`
// countdown function
function ongoing() {
    let now = new Date()
    let diff = futureTime.getTime() - now.getTime()
    // if countdown ends, render different data
    if(diff <= 0) {
        clearInterval(ongoingCountdown)
        let wrapper = document.getElementById('countdown-wrapper')
        wrapper.style.opacity = '0'
        setTimeout(() => {
            wrapper.innerHTML = `<h3>Sorry pal! This giveaway has ended.</h3>`
            wrapper.style.opacity = '1'
        },600)
    } else {
        let remainingTime = timeConvertor(diff)
        for (const key in countdown) {
            if (countdown.hasOwnProperty(key)) {
                countdown[key][0].innerHTML = remainingTime[key]
                countdown[key][1].innerHTML = remainingTime[key] === 1 ? `${key}` : `${key}s`            
            }
        }
        timeClock.children[0].innerHTML = ticktock ? 'TICK' : null
        timeClock.children[2].innerHTML = !ticktock ? 'TOCK' : null
        ticktock = !ticktock
        }
    }
  // start counting
    let ongoingCountdown = setInterval(ongoing, 1000)
}



window.addEventListener("DOMContentLoaded", main)