/*
* https://frontendeval.com/questions/countdown-timer
*
* Create a countdown timer that notifies the user
*/
 let startBtn;
            let timerInterval 
            init();
            createTimer();
            function init(){
                let input = document.createElement("div");
                $(input).addClass("input")
                let colon = document.createElement("span")
                colon.textContent = ":"
                let hours = document.createElement("input");
                $(hours).attr({
                    "type":"number",
                    "id":'hours',
                    "placeholder": "HH"
                });
                
                let mins = document.createElement("input");
                $(mins).attr({
                    "type":"number",
                    "id":'mins',
                    "placeholder": "MM"
                });

                let secs = document.createElement("input");
                $(secs).attr({
                    "type":"number",
                    "id":'secs',
                    "placeholder": "SS"
                });

                let start = startBtn ? startBtn : getStartBtn();

                input.appendChild(hours);
                input.append(colon);
                input.appendChild(mins);
                input.append(colon);
                input.appendChild(secs);
                input.appendChild(start);

                $('#container')[0].appendChild(input)
                attachListners();
            }
            function getStartBtn(){
                startBtn = document.createElement("button")
                $(startBtn).addClass("start");
                startBtn.textContent="Start"
                return startBtn
            }
            function attachListners(){
                $(startBtn).off("click",handleStartBtnClick).on("click",handleStartBtnClick);
            }

           function updateTimerdiv(hours,mins,secs){
                 timerInterval = setInterval(function(){
                    if(secs){
                        secs-=1;
                        if(secs == 0){
                            if(mins){
                                secs = 60;
                                mins-=1
                                if(hours&& mins == 0){
                                    mins = 60
                                    hours-=1;
                                }
                                $("#hour-span")[0].innerText = hours +" : ";
                                $("#mins-span")[0].innerText = mins +" : ";
                                
                            }else{
                                notify();
                            }
                        }
                        $("#secs-span")[0].innerText = secs;
                    }else{
                        notify();
                    }
                },1000)
            
           }

           function notify(){
            clearInterval(timerInterval);
            alert("Time completed");
            reset();
           }

           function reset(){
                $("#hours").val('');
               $("#mins").val('');
               $("#secs").val('');
                $('.input').removeClass("hide");
                $(".timerDiv").addClass("hide");
           }

           function handleStartBtnClick(){
                let hours = $("#hours").val();
                let mins = $("#mins").val();
                let secs = $("#secs").val();
                $('.input').addClass("hide");
                $("#hour-span")[0].innerText = (hours?hours:'00') +" : ";
                $("#mins-span")[0].innerText = (mins?mins:'00' )+" : ";
                $("#secs-span")[0].innerText = secs?secs:'00' ;  
                $(".timerDiv").removeClass("hide");
                updateTimerdiv(hours,mins,secs);
           }
           function createTimer(){           
               let timerDiv = document.createElement("div");
               $(timerDiv).addClass("timerDiv")

               let hoursSpan = document.createElement("span")
               $(hoursSpan).attr("id","hour-span");
               
               let minsSpan = document.createElement("span")
               $(minsSpan).attr("id","mins-span");

               let secsSpan = document.createElement("span")
               $(secsSpan).attr("id","secs-span");
               
               let pause = createPauseBtn();
               let resume = createResumeBtn();
               let stop = createStopBtn();

                timerDiv.append(hoursSpan)
                timerDiv.append(minsSpan)
                timerDiv.append(secsSpan)
                timerDiv.append(pause)
                timerDiv.append(resume)
                timerDiv.append(stop)

                $(timerDiv).addClass("hide");
                $('#container')[0].append(timerDiv);
           }
           function createPauseBtn(){
                let pauseBtn = document.createElement("button")
                $(pauseBtn).addClass("pause");
                pauseBtn.textContent="Pause"
                $(pauseBtn).off("click",handlePuseBtnClick).on("click",handlePuseBtnClick);
                return pauseBtn
           }
           function createResumeBtn(){
                let resumeBtn = document.createElement("button")
                $(resumeBtn).addClass("resume hide" );
                resumeBtn.textContent="Resume"
                $(resumeBtn).off("click",handleResumeBtnClick).on("click",handleResumeBtnClick);
                return resumeBtn
           }
           function createStopBtn(){
                let stopBtn = document.createElement("button")
                $(stopBtn).addClass("stop");
                stopBtn.textContent="Stop"
                $(stopBtn).off("click",handleStopBtnClick).on("click",handleStopBtnClick);
                return stopBtn
           }

           function handlePuseBtnClick(){
            clearInterval(timerInterval);
            $(".pause").addClass("hide");
            $(".resume").removeClass("hide" );

           }
           function handleStopBtnClick(){
            clearInterval(timerInterval);
            reset();
           }
           function handleResumeBtnClick(){
                $(".pause").removeClass("hide");
                $(".resume").addClass("hide");
                let hours = $("#hour-span")[0].innerText.split(":")[0].trim()
            let mins = $("#mins-span")[0].innerText.split(":")[0].trim()
            let secs = $("#secs-span")[0].innerText
            updateTimerdiv(hours,mins,secs)

           }