function websocket_init() {
    window.addEventListener('ws_connected', () => {
        console.log("tts.js ws_connected event triggered");
    });

    window.addEventListener('ws_disconnected', () => {
        console.log("tts.js ws_disconnected event triggered");

    });
    window.addEventListener('ws_message', (event) => {
        let rep = event.detail;
        let cmd = rep.reply;
        let data = rep.data;
        if (cmd && cmd.length > 0) {
            switch (cmd) {
                case "start_generate_tts":
                    if (data && data.length>0 && "ok"===data){
                        add_to_list("TTS generation started.");
                        $('#startstopgeneration').text("Stop Generating");
                    }
                    break;
                case "stop_generate_tts":
                    if (data && data.length>0 && "ok"===data){
                        add_to_list("TTS generation stopped.");
                        $('#startstopgeneration').text("Start Generating");
                    }
                    break;
                case "tts_generate_progress":
                    if (data && data.length>0){
                        let xx = JSON.parse(data);
                        if ("progress" in xx){
                            if ("message" in xx){
                                add_to_list(xx.message + "(" + xx.progress+" %)");
                            }
                        }
                    }
            }
        }
    });
}

function add_to_list(message){
    // add message to generatelogs list, with date time prefix
    let li = document.createElement("li");
    let now = new Date();
    let datetime = now.toLocaleString();
    li.appendChild(document.createTextNode("[" + datetime + "] " + message));
    $('#generatelogs').append(li);
}

$(document).ready(function () {
    console.log("TTS module loaded.");
    websocket_init();

    $('#uploadjson').on('click', function () {
        // TODO upload JSON file and process it
    });
    $('#startstopgeneration').on('click', function () {
        if ($('#startstopgeneration').text() === "Start Generating") {
            // clear list generatelogs
            $('#generatelogs').empty();
            let data = {
                voicetype: $('#voicetype').val(),
                languagetogenerate: $('#languagetogenerate').val(),
                databasesource: $('#databasesource').val(),
                targetas: $('#targetas').val(),
                fileoperation:  $('input[name="fileoperation"]:checked').val(),
                autoadd: $('input[name="autoadd"]:checked').val()
            }
            sendCommand("start_generate_tts", JSON.stringify(data));
        } else {
            sendCommand("stop_generate_tts", "");
        }



    });
});