let ipadresse = "localhost";
let port = "7300";
let EventObjArr = [];
let msgArr = [];
let Teams = [];
let date;
let append = "";

class EventOBJ {

    constructor(equipNumber, eventTypeId, id, participantId, partyId, position, properties, sampleTime) {
        this.equipNumber = equipNumber;
        this.eventTypeId = eventTypeId;
        this.id = id;
        this.participantId = participantId;
        this.partyId = partyId;
        this.position = position;
        this.properties = properties;
        this.sampleTime = sampleTime;
        this.EventTypeName = null;
        this.color = null;
        this.realTime;
    }

    setEventTypeName() {

        switch (this.eventTypeId) {

            case 0:
                this.EventTypeName = "unknown"
                this.color = "rgb(148,0,211,0.6)";
                break;
            case 1:
                this.EventTypeName = "Hit"
                this.color = "rgb(255,255,0,0.6)";
                break;
            case 10:
                this.EventTypeName = "RadioTvc"
                this.color = "rgb(186,85,211,0.6)";
                break;
            case 11:
                this.EventTypeName = "Audio"
                this.color = "rgb(0,0,255,0.6)";
                break;
            case 12:
                this.EventTypeName = "Video"
                this.color = "rgb(79,79,79,0.6)";
                break;
            case 13:
                this.EventTypeName = "HitIndirect"
                this.color = "rgb(139,69,19,0.6)";
                break;
            case 14:
                this.EventTypeName = "HitMine"
                this.color = "rgb(205,92,92,0.6)";
                break;
            case 15:
                this.EventTypeName = "HitN"
                this.color = "rgb(178,34,34,0.6)";
                break;
            case 16:
                this.EventTypeName = "HitC"
                this.color = "rgb(160,82,45,0.6)";
                break;
            case 17:
                this.EventTypeName = "EnterDangerArea"
                this.color = "rgb(152,251,152,0.6)";
                break;
            case 18:
                this.EventTypeName = "LeaveDangerArea"
                this.color = "rgb(255,160,122,0.6)";
                break;
            case 19:
                this.EventTypeName = "EnterMineArea"
                this.color = "rgb(0,255,0,0.6)";
                break;
            case 2:
                this.EventTypeName = "WeaponAssignment"
                this.color = "rgb(199,199,199,0.6)";
                break;
            case 20:
                this.EventTypeName = "LeaveMineArea"
                this.colro = "rgb(255,0,0,0.6)";
                break;
            case 21:
                this.EventTypeName = "CrossLocalBorderline"
                this.color = "rgb(0,255,255,0.6)";
                break;
            case 22:
                this.EventTypeName = "EnterFunctionalArea"
                this.color = "rgb(124,252,0,0.6)";
                break;
            case 23:
                this.EventTypeName = "LeaveFunctionalArea"
                this.color = "rgb(255,69,0,0.6)";
                break;
            case 24:
                this.EventTypeName = "EnterNuclear"
                this.color = "rgb(50,205,50,0.6)";
                break;
            case 25:
                this.EventTypeName = "LeaveNuclear";
                this.color = "rgb(255,20,147,0.6)";
                break;
            case 26:
                this.EventTypeName = "CrossGlobalBorderline"
                this.color = "rgb(0,206,209,0.6)";
                break;
            case 27:
                this.EventTypeName = "HitB";
                this.color = "rgb(255,215,0,0.6)";
                break;
            case 3:
                this.EventTypeName = "BiteMessage"
                this.color = "rgb(30,144,255,0.7)";
                break;
            case 4:
                this.EventTypeName = "FireEvent"
                this.color = "rgb(189,183,107,0.6)";
                break;
            case 5:
                this.EventTypeName = "HitBuilding"
                this.color = "rgb(184,134,11,0.6)";
                break;
            case 6:
                this.EventTypeName = "Manipulation"
                this.color = "rgb(255,105,180,0.6)";
                break;
            case 7:
                this.EventTypeName = "CameraAudio"
                this.color = "rgb(0,191,255,0.6)";
                break;
            case 8:
                this.EventTypeName = "CameraVideo"
                this.color = "rgb(135,206,250,0.6)";
                break;
            case 9:
                this.EventTypeName = "RadioCnr"
                this.color = "rgb(221,160,221,0.6)";
                break;
            case 28:
                this.EventTypeName = "FriendlyFire";
                this.color = "rgb(240,230,140,0.6)";
                break;
            case 100:
                this.EventTypeName = "EquipmentErrorReport";
                this.color = "rgb(34,139,34,0.6)";
                break;
            case 112:
                this.EventTypeName = "EmergencyCall"
                this.color = "rgb(127,255,212,0.6)"
                break;
            default:
                this.EventTypeName = "none"
                this.color = "pink";
                break;
        }
    }

    setRealTime() {

        date = (String(new Date(this.sampleTime)).split(" "));
        this.realTime = `${date[2]} ${date[1]} ${date[3]} | ${date[4]}`
    }
}

window.onload = function () {

    setTime();
    setDate();
    getPorts();
}

function setDate() {

    date = new Date();

    document.getElementById("trainingDateEnd").valueAsDate = date;
    document.getElementById("trainingDateEnd").innerHTML = date;

    date.setFullYear(date.getFullYear() - 1);

    document.getElementById("trainingDateStart").valueAsDate = date;
    document.getElementById("trainingDateStart").innerHTML = date;
}

function setTime() {

    document.getElementById("startTime").value = "00:00";
    document.getElementById("startTime").innerHTML = "00:00";
    document.getElementById("endTime").value = "00:00";
    document.getElementById("endTime").innerHTML = "00:00";
}

function connect() {

    document.getElementById("connectionDiv").innerHTML = "Server: not connected";
    document.getElementById("connectionDiv").style.color = "red";
    ipadresse = document.getElementById("ipadresse").value;
    port = document.getElementById("port").value;

    getData();
}

function getPorts() {

    if ("WebSocket" in window) {
        document.getElementById("connectionDiv").innerHTML = "Server: not connected";
        document.getElementById("connectionDiv").style.color = "red"

        wSocket = new WebSocket("ws://" + ipadresse + ":" + port)

        document.getElementById("ipadresse").value = ipadresse;
        document.getElementById("port").value = port;

        wSocket.onopen = function () {
            document.getElementById("connectionDiv").innerHTML = "Server: connected";
            document.getElementById("connectionDiv").style.color = "green"

            sendMsg();
        };

        wSocket.onmessage = function (event) {
            let msg = JSON.parse(event.data);
            let ports = msg.data;
            let portSelection = document.getElementById("portSelection");
            portSelection.innerHTML = `<option value="7300" selected>Übungen</option>`;

            ports.forEach(port => {
                port.services.forEach(service => {
                    if (service.name === "ExerciseEventManagement") {
                        append += `<option value="${service.ports[0].number}">Übung ${port.exerciseId}</option>`
                    }
                });

                portSelection.innerHTML += append;
                append = "";
            });
        };
    }
    else {
        alert("WebSocket is NOT supported by your Browser!");
    }
}

function sendMsg() { //abfrage für alle ServicePortInformationen

    wSocket.send(JSON.stringify({
        type: "servicePortsInformationRequest",
        uuid: "7777",
    }));
}

function changePort() {

    let selected = document.getElementById("portSelection").value;
    port = String(selected);
    document.getElementById("port").value = port;

    if (port == "7300") {
        getPorts();
    } else {
        getData();
    }
}

function getData(requestString) {

    document.getElementById("connectionDiv").innerHTML = "Server: not connected";
    document.getElementById("connectionDiv").style.color = "red"

    if ("WebSocket" in window) {
        if (requestString === undefined) {
            wSocket = new WebSocket("ws://" + ipadresse + ":" + port);
        } else {
            wSocket = new WebSocket("ws://" + ipadresse + ":" + port + requestString);
        }

        console.log("WSocket: ", wSocket);

        connectedToServer = true;

        wSocket.onopen = function () {
            document.getElementById("connectionDiv").innerHTML = "Server: connected";
            document.getElementById("connectionDiv").style.color = "green"
        };
        wSocket.onmessage = function (event) {
            msg = JSON.parse(event.data);

            console.log(msg);

            if (msg[0] != null) {
                msgArr.push(msg);
            }
            else {
                createEventObjs();
            }
        };
    }
    else {
        alert("WebSocket is NOT supported by your Browser!");
    }
}

function sendRequest() {

    EventObjArr = [];
    msgArr = [];
    var übung = document.getElementById("portSelection").value;

    if (übung === "7300") {
        alert("Bitte eine Übung auswählen!");
    }

    var startDate = Date.parse(document.getElementById("trainingDateStart").value) - (2 * 1000 * 60 * 60);
    var startTime = document.getElementById("startTime").value.split(':');
    var endDate = Date.parse(document.getElementById("trainingDateEnd").value) - (2 * 1000 * 60 * 60);
    var endTime = document.getElementById("endTime").value.split(':');

    startTime = (startTime[0] * 60 * 60 * 1000) + (startTime[1] * 60 * 1000);
    endTime = (endTime[0] * 60 * 60 * 1000) + (endTime[1] * 60 * 1000);

    var start = startDate + startTime;
    var end = endDate + endTime;

    if (isNaN(start) || isNaN(end)) {
        alert("Bitte einen Zeitraum auswählen!");
    }

    var requestString = `/request?requestId=1&from=${start}&to=${end}`;
    var eventSelects = document.getElementsByName('rqTypes');
    var firstEvent = true;

    for (var i = 0; i < eventSelects.length; i++) {
        if (firstEvent && eventSelects[i].checked) {
            requestString += "&eventTypeId=";
            firstEvent = false;
        } else if (!firstEvent && eventSelects[i].checked) {
            requestString += ",";
        }

        if (eventSelects[i].checked) {
            requestString += eventSelects[i].value;
        }
    }

    console.log("Request String: ", requestString);

    getData(requestString);
}

function createEventObjs() {

    if (msgArr.length === 0) {                                          //if(msgArr[0] === null)
        alert("Keine Events im Angegebenen Zeitraum gefunden!");
    } else {
        var eventArray = msgArr;

        eventArray.forEach(Array => {
            Array.forEach(event => {
                var e = new EventOBJ(event.equipmentNumber, event.eventTypeId, event.id, event.participantId, event.partyId, event.position, event.properties, event.sampleTime)

                e.setEventTypeName();
                e.setRealTime();

                EventObjArr.push(e);
            });
        })
    }
    countTeams();
}

function countTeams() {

    EventObjArr.forEach(event => {
        if (!Teams.includes(event.partyId)) {
            Teams.push(event.partyId);
        }
    });

    createtableRows();
}

function createtableRows() {

    var div = document.getElementById("displayDiv");
    var rowAppend = "";

    Teams.forEach(team => {
        rowAppend += `<div class="rowHeader">
                        <div class="rowHeaderText">Team${team}</div>
                    </div>
                    <div class="tableRow" id="tr${team}"></div>`
    });

    div.innerHTML = rowAppend;

    createHtml();
}

function createHtml() {

    Teams.forEach(team => {
        var id = "tr" + team;
        var div = document.getElementById(id);
        var append = ""
        var partId = document.getElementById("partId").value;

        EventObjArr.forEach(event => {
            if (partId === "") {
                if (event.partyId === team) {
                    append += `<div class="listElement">
                            <div class="heading">${event.realTime}</div>
                            <div class="eventType" title=${event.EventTypeName} style="background-color:${event.color}"></div>
                            <div class="infoDiv">
                                <div class="infoTitleDiv">ID:</div>
                                <div class="infoInfoDiv">${event.id}</div>
                            </div>
                            <div class="infoDiv">
                                <div class="infoTitleDiv">EqNumber:</div>
                                <div class="infoInfoDiv">${event.equipNumber}</div>
                            </div>
                            <div class="infoDiv">
                                <div class="infoTitleDiv">EvTypeID:</div>
                                <div class="infoInfoDiv">${event.eventTypeId}</div>
                            </div>
                            <div class="infoDiv">
                                <div class="infoTitleDiv">ParticID:</div>
                                <div class="infoInfoDiv">${event.participantId}</div>
                            </div>
                            <div class="infoDiv">
                                <div class="infoTitleDiv">PartyID:</div>
                                <div class="infoInfoDiv">${event.partyId}</div>
                            </div>

                            <div class="infoDiv">Position:</div>
                            <div class="positionInfoDiv">
                                <div class="posParam">x:</div>
                                <div class="actualPosition">${event.position.x}</div>
                            </div>
                            <div class="positionInfoDiv">
                                <div class="posParam">y:</div>
                                <div class="actualPosition">${event.position.y}</div>
                            </div>
                            <div class="positionInfoDiv">
                                <div class="posParam">z:</div>
                                <div class="actualPosition">${event.position.z}</div>
                            </div>
                        </div>`;
                }
            } else {
                if (event.partyId === team && partId == event.participantId) {
                    append += `<div class="listElement">
                            <div class="heading">${event.realTime}</div>
                            <div class="eventType" title=${event.EventTypeName} style="background-color:${event.color}"></div>
                            <div class="infoDiv">
                                <div class="infoTitleDiv">ID:</div>
                                <div class="infoInfoDiv">${event.id}</div>
                            </div>
                            <div class="infoDiv">
                                <div class="infoTitleDiv">EqNumber:</div>
                                <div class="infoInfoDiv">${event.equipNumber}</div>
                            </div>
                            <div class="infoDiv">
                                <div class="infoTitleDiv">EvTypeID:</div>
                                <div class="infoInfoDiv">${event.eventTypeId}</div>
                            </div>
                            <div class="infoDiv">
                                <div class="infoTitleDiv">ParticID:</div>
                                <div class="infoInfoDiv">${event.participantId}</div>
                            </div>
                            <div class="infoDiv">
                                <div class="infoTitleDiv">PartyID:</div>
                                <div class="infoInfoDiv">${event.partyId}</div>
                            </div>

                            <div class="infoDiv">Position:</div>
                            <div class="positionInfoDiv">
                                <div class="posParam">x:</div>
                                <div class="actualPosition">${event.position.x}</div>
                            </div>
                            <div class="positionInfoDiv">
                                <div class="posParam">y:</div>
                                <div class="actualPosition">${event.position.y}</div>
                            </div>
                            <div class="positionInfoDiv">
                                <div class="posParam">z:</div>
                                <div class="actualPosition">${event.position.z}</div>
                            </div>
                        </div>`;
                }
            }
        });

        div.innerHTML = append;
    });
};