var recorder, gumStream;
var lat=null;
var lon=null;
var uuid=null;
var recordButton = document.getElementById("recordButton");
var recordText = document.getElementById("recordText");
var submitButton = document.getElementById("submitButton");

recordButton.addEventListener("click", toggleRecording);

submitButton.addEventListener("click", submitMetadata);


//ProgressBar API: https://progressbarjs.readthedocs.io/en/latest/
var bar = new ProgressBar.Line(progressBar, {
  strokeWidth: 1,
  easing: 'easeInOut',
  duration: 10000,
  color: '#DC1200',
  trailColor: '#eee',
  trailWidth: 1,
  svgStyle: {width: '100%', height: '100%'}
});

function toggleRecording() {
    if (recorder && recorder.state == "recording") {
        bar.stop()
        recorder.stop();
        gumStream.getAudioTracks()[0].stop();
        recordText.innerHTML = "◉ Record";
        recordButton.classList.remove('btn-danger');
        recordButton.classList.add('btn-dark');        
    } else { 
        //If the form or the show-form button are visible, we hide them
        $("#form-wrapper").css({display:"none"});        
        navigator.mediaDevices.getUserMedia({
            audio: true
        }).then(function(stream) {
            gumStream = stream;
            recorder = new MediaRecorder(stream);
            recorder.addEventListener("dataavailable", function(e){
                var xhr=new XMLHttpRequest();                
                var fd=new FormData();
                //Create a unique identifier for the last record
                uuid = uuidv4();
                fd.append("audio_data", e.data, new Date().toISOString());
                fd.append("lat", lat);
                fd.append("lon", lon);
                fd.append("mimeType", e.data.type);
                fd.append("uuid", uuid);
                xhr.open("POST","/cgi-bin/upload.py",true);
                xhr.send(fd);
                bar.set(0);
                $("#form-wrapper").css({display:"block"});
                $("#form-wrapper")[0].scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
            });
            recorder.start();
            bar.animate(1.0, {}, toggleRecording);
            recordText.innerHTML = "◻ Stop";
            recordButton.classList.remove('btn-dark');
            recordButton.classList.add('btn-danger');
            navigator.geolocation.getCurrentPosition(function(position) {
                lat = position.coords.latitude;
                lon = position.coords.longitude;
            });
        });
    }
}

function submitMetadata() {
    var xhr2=new XMLHttpRequest();
    var fd2=new FormData(document.querySelector("form"));    
    fd2.append("mimeType", "json");
    fd2.append("uuid", uuid);
    xhr2.open("POST","/cgi-bin/upload.py",true);
    xhr2.send(fd2);
    //We hide again the form, and say thank you!
    $("#form-wrapper").css({display:"none"});
    $("#thanks").animate({opacity: 1}, 1000, function() {
        setTimeout(function(){
            $("#thanks").animate({opacity:0}, 500)
        }, 800);
    });
}