const speech = new SpeechSynthesisUtterance();

speech.lang = "en";

let voices = [];
let myAudio1 = document.getElementById('myAudio1')
let myAudio2 = document.getElementById('myAudio2')
let myAudio3 = document.getElementById('myAudio3')
let myAudio4 = document.getElementById('myAudio4')
let myAudio5 = document.getElementById('myAudio5')
let myAudio6 = document.getElementById('myAudio6')
let counts	 =0;


window.speechSynthesis.onvoiceschanged = () => {
  voices = window.speechSynthesis.getVoices();
  speech.voice = voices[3];
  let voiceSelect = document.querySelector("#voices");
  voices.forEach((voice, i) => (voiceSelect.options[i] = new Option(voice.name, i)));
};

document.querySelector("#rate").addEventListener("input", () => {
  const rate = document.querySelector("#rate").value;
  speech.rate = rate;
  document.querySelector("#rate-label").innerHTML = rate;
});

document.querySelector("#volume").addEventListener("input", () => {
  const volume = document.querySelector("#volume").value;
  speech.volume = volume;
  document.querySelector("#volume-label").innerHTML = volume;
});



document.querySelector("#voices").addEventListener("change", () => {
  speech.voice = voices[document.querySelector("#voices").value];
});

$(document).ready(function(){
 $('#start').click(function(){

       
});
    });
  // set time out 2 sec
     setTimeout(function(){
        $('#start').trigger('click');
    }, 2000);





function announce(){

    let table=document.getElementById('datatable')
    var tx=table.rows[1].cells[1].innerText+',' + table.rows[1].cells[2].innerText.toLowerCase() +'...diharap menuju ke'+table.rows[1].cells[4].innerText; 







  speech.text = tx;

  speech.pitch = 1.4;
  speech.rate = 0.7;

  
  myAudio1.volume=0.1;
  myAudio2.volume=0.7;
  myAudio3.volume=0.3;
  myAudio4.volume=0.7;
  myAudio5.volume=0.1;


  
  myAudio1.play();
  // intro music
  if( myAudio1.addEventListener('ended',()=>{myAudio2.play();}));  
  // begining 
  if(myAudio2.addEventListener('ended',()=>{window.speechSynthesis.speak(speech);}) );
  
  // closing
  if( speech.addEventListener('end',()=>{window.speechSynthesis.cancel();myAudio4.play();}));
 

  if(myAudio4.addEventListener('ended',()=>{ myAudio5.play();}));
  if(myAudio5.addEventListener('ended',()=>{ speech.text="";loop(); countset(); }));

};

function countset(){
    let table=document.getElementById('datatable');
	var canceltxt= document.getElementById('canceltxt');
counts ++;

if(counts == 2){
canceltxt.innerHTML=table.rows[1].cells[6].innerHTML;

$("#submit").trigger('click');


};

}




function loop(){

var table= $("#datatable").dataTable();
  
var tableCount=table.fnGetData().length;


if(tableCount>0){
announce();
}else{

  myAudio6.volume=0.1;
  myAudio6.play();

$(document).ready(function (){ 
  
  
  
  $('#start').click(function(){ 


});
  // set time out 2 sec
     setTimeout(function(){
        $('#start').trigger('click');
    }, 2000);
});


  }
}





document.querySelector("#start").addEventListener("click",()=> {

loop()
  
});

document.querySelector("#pause").addEventListener("click", () => {
  window.speechSynthesis.pause();
});

document.querySelector("#resume").addEventListener("click", () => {
  window.speechSynthesis.resume();
});

document.querySelector("#cancel").addEventListener("click", () => {
  window.speechSynthesis.cancel();
});



function timerFunction(){
   var sec = 0;
 
    function pad ( val ) { return val > 9 ? val : "0" + val; }

    setInterval( function(){
    var hour= pad(parseInt(sec/360,10));
var minute=  pad(parseInt(sec/60,10));
var second= pad(++sec%60);
       document.getElementById('timer').innerHTML= hour +':'+minute+':'+ second;
        if(hour == 1){
    location.reload();
    }
 
    }, 1000);
	

    
  
}


const pauseIconClassName = document.getElementById('pause')
const playIconClassName = document.getElementById('start')
const stopIconClassName= document.getElementById('submit');
const btns = document.querySelectorAll('.btn')

function onChange (event) {
  // get the button elememt from the event
    const buttonElement = event.currentTarget
  
  // check if play button class is present on our button
  const isPlayButton = buttonElement.contains(playIconClassName)
  const isStopPlay=buttonElement.contains(stopIconClassName)
  
  // if a play button, remove the play button class and add pause button class
  if (isPlayButton) {
    pauseIconClassName.hidden=false;
    playIconClassName.hidden=true;
    
    // if a pause button, remove pause button class and add play button class
  } else {
    playIconClassName.hidden=false;
    pauseIconClassName.hidden=true;
  }


  // You can also use .toggle function on classList as mentioned by the person in other answer
}

// query selector all returns a list of nodes, therefore we need to iterate over it and attach an event listener to each button seperatly
btns.forEach(btn => {
    btn.addEventListener('click', onChange)
})