/**
 * Speed of pan and tilt
 * @type {number} 0 - 3F (hex) / 63 (dec)
 */
let pan_speed = 20;
let tilt_speed = 20;
let video_quality = "LQ";
/**
 * @type {WebSocket}
 */
let ws;

let camerastream;



document.addEventListener("DOMContentLoaded", function(){
    camerastream = document.getElementById("camerastream");

    setInterval(function (){
        if (ws.readyState === WebSocket.OPEN){
            ws.send(JSON.stringify({
                command: "GET BASE64",
                data: video_quality
            }));

        } else update_camerastream(null);
    },10);

    ws = new WebSocket("/ws");

    ws.onopen = function(){
        console.log("Connected to the server");

        // request basic parameters
        ws.send(JSON.stringify({
            command: "GET MAX ZOOM",
            data: 0
        }));
        ws.send(JSON.stringify({
            command: "GET VOLUME",
            data: 0
        }));
        ws.send(JSON.stringify({
            command: "GET ZOOM",
            data: 0
        }));
        ws.send(JSON.stringify({
            command: "GET RESOLUTION",
            data: 0
        }));

    }
    ws.onmessage = function(event){
        //console.log("Received data from server: " + event.data);
        /**
         * @type {{reply: string, data: string|number, additional: string}} dx
         */
        let dx = JSON.parse(event.data);
        switch (dx.reply){
            case "GET BASE64":
                if (dx.data.startsWith("data:image/jpeg;base64,")){
                    update_camerastream(dx.data);
                } else update_camerastream(null);
                if (dx.additional && dx.additional.length>0){
                    $('#streaming_status').html(dx.additional);
                }
                break;
            case "SET VOLUME":
                console.log("Set Volume: "+dx.data);
                break;
            case "GET VOLUME":
                console.log("Get Volume: "+dx.data);
                $('#customRange').val(dx.data);
                break;
            case "GET MAX ZOOM":
                console.log("Get Max Zoom: "+dx.data);
                $('#zoom')
                    .attr("max", dx.data)
                    .attr("min", 1);


                break;
            case "GET ZOOM":
                console.log("Get Zoom: "+dx.data);
                $('#zoom').val(dx.data);
                break;
            case "GET RESOLUTION":
                console.log("Get Resolution: "+dx.data);
                break;
            case "PAN LEFT":
                console.log("Pan Left");
                break;
            case "PAN RIGHT":
                console.log("Pan Right");
                break;
            case "TILT UP":
                console.log("Tilt Up");
                break;
            case "TILT DOWN":
                console.log("Tilt Down");
                break;
            case "STOP MOVEMENT":
                console.log("Stop Movement");
                break;
            case "SET ZOOM":
                console.log("Set Zoom: "+dx.data);
                break;
            case "PLAY AUDIO":
                console.log("Play Audio: "+dx.data);
                if (dx.data.startsWith("Failed")){
                    alert(dx.data);
                } else $('#status_player').html("Playing Audio "+dx.data);
                break;
            case "STOP AUDIO":
                console.log("Stop Audio");
                $('#status_player').html("Stop Playback");
                break;
            case 'SET VIDEO QUALITY':
                console.log("Set Video Quality: "+dx.data);
                break;

        }

    }
    ws.onclose = function(){
        console.log("Connection closed");
    }
    ws.onerror = function(){
        console.log("Error in connection");
    }

    set_pan_speed(32);
    set_tilt_speed(32);
});

/**
 * Update camera stream
 * @param {String} value
 */
function update_camerastream(value){
    if (camerastream){
        if (value && value.length>0){
            camerastream.src = value;
        } else {
            if (camerastream.src!== "public/images/not-available.png") camerastream.src = "public/images/not-available.png";
        }
    }

}





function play_off(index){
    $('#div'+index).prop("className", "button-container div-disabled");
    $('#btn_play'+index).prop("className", "btn-play1 show text-light");

}

function play_on(index){
    $('#div'+index).prop("className", "button-container");
    $('#btn_play'+index).prop("className", "btn-play1 show");
}

function show_play_and_hide_stop(index){
    $('#btn_play'+index).prop("className", "btn-play1 show");
    $('#btn_stop'+index).prop("className", "btn-play1 hide");
}

function show_stop_and_hide_play(index){
    $('#btn_play'+index).prop("className", "btn-play1 hide");
    $('#btn_stop'+index).prop("className", "btn-play1 show");

}

function allplay(){
    for (let i = 0; i < 5; i++) play_on(i+1);
}

function play_button(index){
    show_stop_and_hide_play(index);
    $('#status_player').html("Play");
    for (let i = 1; i <= 5; i++){
        if (i!==index) play_off(i);
    }
    send_play_audio(index);
}

function stop_button(index){
    show_play_and_hide_stop(index);
    $('#status_player').html("Stop");

    allplay();
    send_stop_audio();
}



/**
 * Send command to stop audio
 */
function send_stop_audio(){
    if (ws.readyState === WebSocket.OPEN){
        ws.send(JSON.stringify({
            command: "STOP AUDIO",
            data: 0
        }));
    } else console.log("WebSocket is not open");
}

/**
 * Send command to play audio
 * @param {number} index 1 - 5
 */
function send_play_audio(index){
    if (ws.readyState === WebSocket.OPEN){
        ws.send(JSON.stringify({
            command: "PLAY AUDIO",
            data: index
        }));
    } else console.log("WebSocket is not open");
}

function unmute(){
    $('#mute').prop("className", "btn-mute show");
    $('#unmute').prop("className", "btn-mute hide");
    console.log("unmute")
    if (ws.readyState === WebSocket.OPEN){
        ws.send(JSON.stringify({
            command: "UNMUTE",
            data: 0
        }));
    } else console.log("WebSocket is not open");
}
function mute(){
    $('#mute').prop("className", "btn-mute hide");
    $('#unmute').prop("className", "btn-mute show");

    console.log("mute")
    if (ws.readyState === WebSocket.OPEN){
        ws.send(JSON.stringify({
            command: "MUTE",
            data: 0
        }));
    } else console.log("WebSocket is not open");
}

function btn_center_off(){
    $('#btn_center').prop("className", "btn-center-unactive fa-solid fa-circle");
}

function btn_up(){
    console.log("btn_up")
    if (ws.readyState === WebSocket.OPEN){
        ws.send(JSON.stringify({
            command: "TILT UP",
            data: tilt_speed
        }));
        btn_center_off()
    } else console.log("WebSocket is not open");
}
function btn_left(){
    console.log("btn_left")
    if (ws.readyState === WebSocket.OPEN){
        ws.send(JSON.stringify({
            command: "PAN LEFT",
            data: pan_speed
        }));
        btn_center_off();
    } else console.log("WebSocket is not open");
}
function btn_right(){
    console.log("btn_right")
    if (ws.readyState === WebSocket.OPEN){
        ws.send(JSON.stringify({
            command: "PAN RIGHT",
            data: pan_speed
        }));
        btn_center_off()
    } else console.log("WebSocket is not open");
}
function btn_down(){
    console.log("btn_down")
    if (ws.readyState === WebSocket.OPEN){
        ws.send(JSON.stringify({
            command: "TILT DOWN",
            data: tilt_speed
        }));
        btn_center_off()
    } else console.log("WebSocket is not open");
}

function stop_movement(){
    console.log("stop_movement")
    if (ws.readyState === WebSocket.OPEN){
        ws.send(JSON.stringify({
            command: "STOP MOVEMENT",
            data: 0
        }));
    } else console.log("WebSocket is not open");
}

function set_zoom(){
    let zoom = document.getElementById("zoom");
    console.log("set_zoom "+zoom.value)
    if (ws.readyState === WebSocket.OPEN){
        ws.send(JSON.stringify({
            command: "SET ZOOM",
            data: zoom.value
        }));
    } else console.log("WebSocket is not open");
}

function set_volumeoutput(value){
    $('#volumebarvalue').val(value);

    console.log("set_volumeoutput "+value)
    if (ws.readyState === WebSocket.OPEN){
        ws.send(JSON.stringify({
            command: "SET VOLUME",
            data: value
        }));
    } else console.log("WebSocket is not open");
}

function set_pan_speed(value){
    pan_speed = value;
    console.log("set_pan_speed "+value);
    clearpan();
    let classvalue = "btn btn-dark btn-sm";
    switch(pan_speed){
        case 16:
            $('#pan1').prop("className", classvalue );
            break;
        case 32:
            $('#pan2').prop("className", classvalue);
            break;
        case 48:
            $('#pan3').prop("className", classvalue);
            break;
        case 63:
            $('#pan4').prop("className", classvalue);
            break;
    }

}

function set_tilt_speed(value){
    tilt_speed = value;
    console.log("set_tilt_speed "+value);
    cleartilt();
    let classvalue = "btn btn-dark btn-sm";
    switch (tilt_speed){
        case 16:
            $('#tilt1').prop("className", classvalue);
            break;
        case 32:
            $('#tilt2').prop("className", classvalue);
            break;
        case 48:
            $('#tilt3').prop("className", classvalue);
            break;
        case 63:
            $('#tilt4').prop("className", classvalue);
            break;
    }
}

// Pan Tilt Speed
function clearpan(){
    for(let i = 1; i <= 4; i++){
        $('#pan'+i).prop("className", "btn btn-outline-dark btn-sm");
    }
}



function cleartilt(){
    for(let i = 1; i <= 4; i++){
        $('#tilt'+i).prop("className", "btn btn-outline-dark btn-sm");
    }
}

function change_video_quality(){
    let btn = document.getElementById("quality_video")
    video_quality = btn.checked?"HQ":"LQ";
}