$(window).ready(function () {
    var isConnected = false;
    var apiIsAlive = false;
    // TODO: change to valid url 
    var apiServer = "http://localhost:8080";

    class Hello {
        constructor() {
            this.type = "hello";
        }
    }
    class Connect {
        constructor(ip, port) {
            this.type = "connect";
            // string 
            this.ip = ip;
            // string 
            this.port = port;
        }
    }
    class Send {
        constructor(operation, inc, register_address, data) {
            this.type = "send";
            // bool: true -> wr | false -> rd
            this.wrd = operation;
            // bool
            this.inc = inc;
            // string 
            this.register_address = register_address;
            // string 
            this.data = data;
        }
    }
    class Close {
        constructor() {
            this.type = "close";
        }
    }
    class PacketFabric {
        constructor() {}
        new_hello() {
            return new Hello();
        }
        new_connect(ip, port) {
            return new Connect(ip, port); 
        }
        new_send(operation, inc, register_address, data) {
            return new Send(operation, inc, register_address, data);
        }
        new_close() {
            return new Close();
        }
    }

    const fabric = new PacketFabric();
    let hello_check = fabric.new_hello();
    queryConstructor(hello_check);

    function dataConstructor(packet){
        switch (packet.type) {
            case 'hello':
                return JSON.stringify({});
            case 'close':
                return JSON.stringify({});
            case 'connect':
                return JSON.stringify({
                    "ip_address" : packet.ip,
                    "port" : packet.port
                });
            case 'send':
                return JSON.stringify({
                    "request_type": "0x01",
                    "data_size" : String(1 + 4 + 4*packet.data.split(' ').length),
                    "additional_header": {
                        "wrd": packet.wrd,
                        "auto_increment": packet.inc,
                        "register_address": packet.register_address
                    },
                    "data" : packet.data,
                });
            default:
                return packet    
        }
    }
    function reponseHandlerConstructor(packet, status, er) {
        switch (packet.type) {
            case 'hello':
                apiIsAlive = status;
                return status ? 
                    ok_msg_conn(`API-Server is running. Connection established`)  
                    : err_msg_conn(`API-Server unreachable. Error: ${er.statusText}. Status : ${er.status}`);
            case 'close':
                isConnected = status ? false : isConnected;
                if (status) {
                    $('#ipAddress').prop("disabled", false);
                    $('#port').prop("disabled", false);
                    $('#ipAddress').val("");
                    $('#port').val("");
                    $('#connect-btn').val("Connect");
                }
                return status ? 
                    ok_msg_conn(`Connection closed`)    
                    : err_msg_conn(`Cannot close connection. Error: ${er.statusText}. Status : ${er.status}`);
            case 'connect':
                isConnected = status ? true : isConnected;
                if (status) {
                    valid('ipAddress');
                    valid('port');
                    $('#ipAddress').prop("disabled", true);
                    $('#port').prop("disabled", true);
                    $('#connect-btn').val("Close");
                } else {
                    invalid('ipAddress');
                    invalid('port');
                }
                return status ? 
                    ok_msg_conn(`Successfully connected to PLD ${packet.ip}:${packet.port}`)    
                    : err_msg_conn(`Cannot open web-socket with ${packet.ip}:${packet.port}. Error: ${er.statusText}. Status : ${er.status}`);
            case 'send':
                if (status) {
                    valid('address');
                    valid('data');
                    valid('ipAddress');
                    valid('port');
                } else {
                    invalid('address');
                    invalid('data');
                }
                return status ? 
                    ok_msg_conn(`Successfully sent data to ${packet.register_address}`)    
                    : err_msg_conn(`Cannot send data to ${packet.register_address}. Error: ${er.statusText}. Status : ${er.status}`);
            default:
                return packet    
        }
    }
    function queryConstructor(packet) {
        $.ajax({
            type: "POST",
            url: `${apiServer}/${packet.type}`,
            // change 
            data: dataConstructor(packet),
            contentType: "application/json",
            // change
            success: function(data){
                return reponseHandlerConstructor(packet, true, "");
            },
            error: function(er){ 
                return reponseHandlerConstructor(packet, false, er);
            }
        });
    } 

    $('#connect-btn').click(function() {
        if (!apiIsAlive) {
            if (!hello_api()) {
                err_msg_conn("Cannot work without API-Server. Check it health...");
                return;
            }
        }
    
        if (isConnected) {
            let packet = fabric.new_close();
            queryConstructor(packet);
        } else {
            const ipAddress = $('#ipAddress').val();
            const port = $('#port').val();
    
            if (ipAddress === "" || port === "") {
                err_msg_conn("Cannot connect to PLD. Empty fields IP or Port");
                invalid('ipAddress');
                invalid('port');
            } else {
                let packet = fabric.new_connect(ipAddress, port);
                queryConstructor(packet);
            }
        }
    });
    
    $('#send-btn').click(() => {
        if (!apiIsAlive) {
            if (!hello_api()) {
                err_msg_conn("Cannot work without API-Server. Check it health...");
                return;
            }
        }
        const address = document.getElementById('address').value;
        const data = document.getElementById('data').value;
        // wr or rd
        const wrd = () => document.querySelector('input[type=radio]:checked')?.value === "wr"
        // true or false 
        const inc = document.querySelector('#inc').checked;
        let packet = fabric.new_send(wrd(), inc, address, data);
        
        if (isConnected) {
            valid('ipAddress');
            valid('port');
            if (address == "" || data == "") {
            err_msg_conn(`Cannot send data to PLD. Empty fields Data or Segment-address`);
            invalid('address');
            invalid('data');
            }
            else {
                queryConstructor(packet);
            }
        } else {
            invalid('ipAddress');
            invalid('port');
            err_msg_conn(`Cannot send any data! Connect to PLD first`);
        }
    });

    function hello_api() {
        let packet = fabric.new_hello;
        return queryConstructor(packet);
    }

    function valid(id) {
        var obj = document.getElementById(id).classList;
        if (obj.contains('invalid-args')) {
            obj.remove('invalid-args');
            obj.add('valid-args');
        }
    }
    function invalid(id) {
        var obj = document.getElementById(id).classList;
        if (obj.contains("valid-args")) {
            obj.remove("valid-args");
            obj.add("invalid-args");
        }
    }
    function ok_msg_conn(data) {
        document.getElementById('log').innerHTML += String(`<p style="color:white"><span style="color:green"><b>[OK]</b></span> ${new Date().toLocaleString()} : ${data}</p><br>`)
        return true;
    }
    function err_msg_conn(data) {
        document.getElementById('log').innerHTML += String(`<p style="color:white"><span style="color:red"><b>[ERROR]</b></span> ${new Date().toLocaleString()} : ${data}</p><br>`)
        return false;
    }

})