var micEl, infoButEl, formButEl, canvasEl;
var formDialogEl, infoDialogEl;
let chunks = [];
var cContext;
var xie = 1;
var mediaRecorder = false;

var sendFile = function (blob) {
    const formData = new FormData();

    formData.append('userfile', blob, new Date() + ".webm");

    return fetch('', {
        method: 'POST',
        body: formData
    });
}

var initVisual = function (stream) {
    var audioContext = new AudioContext();
    const ms = audioContext.createMediaStreamSource(stream);
    var analyser = audioContext.createAnalyser();

    ms.connect(analyser);
    analyser.connect(audioContext.destination);

    analyser.fftSize = 128;

    var bufferLength = analyser.frequencyBinCount;
    var dataArray = new Uint8Array(bufferLength);
    var barW = canvasEl.width / bufferLength;


    var waves = [];


    var animateVisual = function () {

        var cHeight = canvasEl.height;
        cContext.clearRect(0, 0, canvasEl.width, canvasEl.height);

        // scale from 0 to 255
        analyser.getByteFrequencyData(dataArray);

        // if height is 510 then maxscale/2;
        // height is (canvasEl.height/2)/255
        var hRatio = (canvasEl.height) / 255;

        // analyser.getByteTimeDomainData(dataArray);

        // clear the previous shape
        // cContext.fillStyle = "rgba(0, 0, 0, 1)";
        cContext.beginPath();
        // cContext.rect(0, 0, canvasEl.width, canvasEl.height);
        cContext.fill();

        
        
        cContext.fill();
        waves.push(dataArray[0]);

        var max = 144;
        if (waves.length > (max + 1)) {
            waves.shift();
        }

        cContext.fillStyle = "#231F20";

        var barWidth = Math.ceil(canvasEl.width / max);


        // first value is oldest value
        for (var i = waves.length; i > 0; i--) {
            var x = canvasEl.width / 2 - ((waves.length - i) * barWidth);
            var y = canvasEl.height / 2;
            var bHeight = waves[i] * hRatio;
            console.log(waves[i]);

            cContext.fillRect(x, y - (bHeight/2), barWidth, bHeight)
        }



        requestAnimationFrame(animateVisual);
    }

    animateVisual();
}



var initRecording = function (autostart) {
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {

        navigator.mediaDevices
            .getUserMedia({ audio: true })
            .then((stream) => {
                initVisual(stream);

                mediaRecorder = new MediaRecorder(stream);

                mediaRecorder.ondataavailable = (e) => {
                    chunks.push(e.data);
                };

                mediaRecorder.onstop = (e) => {
                    const blob = new Blob(chunks, {
                        type: mediaRecorder.mimeType
                    });
                    chunks = [];
                    sendFile(blob).then((data) => {
                        micEl.setAttribute("state", "finished");
                    });
                }

                if (autostart) {
                    mediaRecorder.start();
                }
            })
    } else {
        console.error("not supported");
    }
}

var startRecording = function (e) {

    if (!mediaRecorder) {
        console.log("did not initalise");
        initRecording(true);
        e.currentTarget.setAttribute("state", "recording");
    } else {

        if (mediaRecorder.state === "recording") {
            console.log("recording was already happening")
            mediaRecorder.stop();
            e.currentTarget.setAttribute("state", "uploading");
        } else {
            console.log("not yet recording, about tos tart");
            mediaRecorder.start();
            e.currentTarget.setAttribute("active", "recording");
        }
    }


}
window.onload = function () {
    console.log("load app");

    micEl = document.querySelector('.fn-start-recording');
    canvasEl = document.querySelector('canvas');
    canvasEl.width = window.innerWidth;
    canvasEl.height = window.innerHeight;
    cContext = canvasEl.getContext("2d");
    infoButEl = document.querySelector('.fn-open-dialog-info');
    formButEl = document.querySelector('.fn-open-dialog-form');
    formDialogEl = document.querySelector('.fn-dialog-form');
    infoDialogEl = document.querySelector(".fn-dialog-info");

    micEl.addEventListener('click', startRecording);

    infoButEl.addEventListener("click", function (e) {
        e.preventDefault();
        infoDialogEl.showModal();
    })

    formButEl.addEventListener('click', function (e) {
        e.preventDefault();
        formDialogEl.showModal();
    })


}