{% macro countdownTimerDeadlineJS(durationMinutes, resetTimeHours) %}
<script>
    let lastTime = '0000';

    /**
     * getRemainingTime() - Diff between the duration and current time returning:
     * 'total' amount of time from now until it last,
     * 'hours', 'minutes' and 'seconds' until it last
     */
    function getRemainingTime(endtime) {
        const totalTime = Date.parse(endtime) - Date.parse(new Date());
        const totalHours = Math.floor((totalTime / (1000 * 60 * 60)) % 24);
        const totalMinutes = Math.floor((totalTime / 1000 / 60) % 60);
        const totalSeconds = Math.floor((totalTime / 1000) % 60);

        // console.log('totalTime', totalTime);
        // console.log('totalHours', totalHours);
        // console.log('totalMinutes', totalMinutes);
        // console.log('totalSeconds', totalSeconds);

        return {
            totalTime,
            totalHours,
            totalMinutes,
            totalSeconds
        };
    }

    /**
     * initCountdown() - accepts ID of countdown element and deadline
     */
    function initCountdown(id, endtime) {
        const body = document.querySelector('body');

        //- storage DOM node to output the countdown digits
        const countdown = document.getElementById(id);

        //- storage each element to output each of the countdown digits
        const digits = countdown.querySelectorAll('.countdown__digit');

        function updateCountdown() {
            const time = getRemainingTime(endtime);

            //- Format output time per Countdown type design
            let currentTime = ('0' + time.totalMinutes).slice(-2) + ('0' + time.totalSeconds).slice(-2);

            // console.log('currentTime', currentTime);
            // console.log('endtime', endtime);
            // console.log('lastTime', lastTime);
            // console.log('currentTime', currentTime);

            animateRemaingTime(lastTime, currentTime);
            lastTime = currentTime;

            //- Controling UI
            if (time.totalTime <= 0) {
                clearInterval(timeInterval);

                //- When Duration Ends
                if (body.classList.contains('show-timeSensitiveBanner')) {
                    body.classList.remove('show-timeSensitiveBanner', 'show-timeSensitiveBanner--club');

                    let timeSensitiveBanner = document.querySelector('#timeSensitiveBanner');

                    if(timeSensitiveBanner.classList.contains('timeSensitiveBanner--compact')) {
                        const cartComponent = document.querySelector('#orderNow');

                        if (isInViewport(cartComponent) == true) {
                            $('html, body').animate({
                                scrollTop: $("#orderNow").offset().top
                            }, 1000);
                        }
                    }

                    $('.cart__product.active').trigger("click");
                }
            }
        }

        //- call updateCountdown() to be effective on page load
        updateCountdown();

        //- update countdown every second
        let timeInterval = setInterval(updateCountdown, 1000);
    }

    /**
     * setActiveTimer() - check if user is in the scheduled sale and start initiate countdown accordingly
     * startTime = Now
     * endTime = durationMinutes
     */
    function setActiveTimer(durationMinutes, durationSeconds) {
        const body = document.querySelector('body');

        let startTime = new Date();
        let endTime = new Date();

        endTime.setMinutes(new Date().getMinutes() + durationMinutes);
        endTime.setSeconds(new Date().getSeconds() + durationSeconds);

        // // Parse dates to get miliseconds unit for easy comparison
        let startTimeMs = Date.parse(startTime);
        let endTimeMs = Date.parse(endTime);

        // console.log('>>>> durationMinutes', durationMinutes);
        // console.log('>>>> durationSeconds', durationSeconds);
        // console.log('>>>> startTime is now', startTime);
        // console.log('>>>> endTime is duration time', endTime); //- 

        // console.log('>>>> startTimeMs', startTimeMs);
        // console.log('>>>> endTimeMs', endTimeMs);

        body.classList.add('show-timeSensitiveBanner');

        initCountdown('countdownTimerDeadline', endTime);
    }

    
    function animateRemaingTime(last, current) {
        for (let i = 0; i < current.length; i++) {
            if (last[i] != current[i]) {
                animate(i, current[i]);
            }
        }
    }

    function animate(index, number) {
        var digit = document.getElementsByClassName('countdown__digit')[index];
        var nextDigit = digit.lastElementChild.cloneNode(true);

        nextDigit.innerHTML = number;
        digit.appendChild(nextDigit);
        digit.classList.add('rotateY');

        setTimeout(() => {
            digit.classList.remove('rotateY');
        }, 500);

        setTimeout(() => {
            digit.removeChild(digit.firstElementChild);
        }, 500);
    }

    function isInViewport(el) {
        const rect = el.getBoundingClientRect();

        return (
            rect.top >= 0 &&
            rect.left >= 0 &&
            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
    }

</script>
{% endmacro %}