
jQuery(document).ready(function ($) {





const canvas = document.getElementById("wave");
const ctx = canvas.getContext("2d");

function resize(){
    canvas.width = window.innerWidth;
    canvas.height = 220;
}
resize();
window.addEventListener("resize", resize);

let audioLevel = 0;

// ====== MICROPHONE ======
navigator.mediaDevices.getUserMedia({ audio:true })
.then(stream => {

    const audioCtx = new AudioContext();
    const analyser = audioCtx.createAnalyser();
    const source = audioCtx.createMediaStreamSource(stream);

    analyser.fftSize = 256;

    source.connect(analyser);

    const dataArray = new Uint8Array(analyser.frequencyBinCount);

    function animate(){

        requestAnimationFrame(animate);

        analyser.getByteFrequencyData(dataArray);

        // average volume
        let sum = 0;
        for(let i=0;i<dataArray.length;i++){
            sum += dataArray[i];
        }

        audioLevel = sum / dataArray.length / 255;

        drawWave(audioLevel);
    }

    animate();
})
.catch(err => {
    console.error(err);
});

// ====== DRAW ======
let t = 0;

function drawWave(level){

    ctx.clearRect(0,0,canvas.width,canvas.height);

    const centerY = canvas.height / 2;

    ctx.beginPath();

    for(let x=0;x<canvas.width;x++){

        const progress = x / canvas.width;

        // animated sine
        const y =
            centerY +
            Math.sin(progress * 12 + t) *
            (20 + level * 90) *
            Math.sin(progress * Math.PI);

        if(x === 0){
            ctx.moveTo(x,y);
        } else {
            ctx.lineTo(x,y);
        }
    }

    // glow
    ctx.shadowBlur = 20;
    ctx.shadowColor = "#59f0ff";

    // gradient
    const gradient = ctx.createLinearGradient(0,0,canvas.width,0);
    gradient.addColorStop(0,"#3b82f6");
    gradient.addColorStop(0.5,"#67e8f9");
    gradient.addColorStop(1,"#8b5cf6");

    ctx.strokeStyle = gradient;
    ctx.lineWidth = 3;
    ctx.stroke();

    t += 0.05;
}












const bars = document.querySelectorAll('.bar');

function animateBars() {
    bars.forEach(bar => {
        const randomHeight = Math.floor(Math.random() * 16) + 4;
        bar.style.height = randomHeight + 'px';
    });
}

setInterval(animateBars, 100);









    /*     $('.mapa img').draggable({
        containment: "parent"
    });  
    
    $('.mapa img').draggable();
    
    */




    $('.klik__record').click(function () {
        $('canvas').show();
        $('.butts1').css('display', 'flex');
        $('.input__text').text('Listening ...');
    });

    $('.klik__cancel').click(function () {
        $('canvas').hide();
        $('.butts1').hide();
        $('.input__text').text('Enter text here');
    });

    $('.klik__check').click(function () {
        $('canvas').hide();
        $('.butts1').hide();
        $('.input__text').text('Enter text here');
        animace();
    });




    let klik = false;

    $('.klik__text').click(function () {

        if (!klik){
            $('.klik__text').text('');
            $('.klik__text').css('color','#b7b7b7')
        }

        klik = true;

    });


    $('.klik__play').click(function () {
        $('.response__icon').show();

        timerId = setTimeout(() => {
            $('.response__icon').hide();

        }, 6000);
    });



    


    let response = 1;

    $('.klik__enter').click(function () {

        animace();

        /* if (response == 1){
            animace();
        } else {
            animace2();
        } */
        
    });    

    $('html').keypress(function(event){

        var keycode = (event.keyCode ? event.keyCode : event.which);
        if(keycode == '13'){

            event.preventDefault();

            if (response == 1){
                animace();
            } else {
                animace2();
            }

        }
    });   


    

    function animace(){

        //$('.klik__text').html('');
        //$('.klik__text').css('color','rgb(92, 92, 92)');    
        //$('.dialog').css('bottom','30px');

        $('.response__wrap').css('height','170px');
        $('.response__wrap').css('transition','all linear 0.6s');
        $('.response__icons').show();
        

         /* $('.response__wrap').css('height','calc(100vh - 196px)'); */

        //response = 2;
    }
    

    function animace2(){

        $('.klik__text').html('');
        //$('.klik__text').css('color','rgb(92, 92, 92)');    


        //$('.rs2').css('transition','all linear 0.3s');
        $('.rs2').css('height','920px');

        //$('.rs2__wrap').css('transition','all linear 0.3s');
        $('.rs2__wrap').css('height','920px');

        //$('.response__wrap').scrollTop();

        distance = $('.butt_resp2').offset().top + $('.response__wrap').scrollTop();

        $('.response__wrap').animate({
            scrollTop: distance - 19
        }, 400);


        /* $('.response__wrap').css('height','30px');
        $('.response__wrap').css('transition','all linear 5s');
        $('.response__wrap').css('height','calc(100vh - 196px)'); */

        response = 3;
    }
		
});