const commit = document.getElementById("commit");
const download = document.getElementById("download");
const remove = document.getElementById("remove");
const motor_table = document.getElementById("motor_table");
const motor_plot = document.getElementById("motor_plot");
const throttle_table = document.getElementById("throttle_table");
const throttle_plot = document.getElementById("throttle_plot");
const map_name = document.getElementById("map_name");
const map_id = document.getElementById("map_id");
const map_description = document.getElementById("map_description");

var changes = 0;

function setEventListeners(element, cb) {
    element.onmouseenter = async function () {
        this.style.backgroundColor = "blue";
    };
    element.onmouseleave = async function () {
        this.style.backgroundColor = "";
    };
    element.onmousedown = async function () {
        this.style.backgroundColor = "red";
    };
    element.ondblclick = async function () {
        cb();
        this.style.backgroundColor = "blue";
    };
}

setEventListeners(remove, async () => {
    const map_filename = (new URLSearchParams(window.location.search)).get("element");

    try {
        const response = await fetch(`/app/remove?element=${map_filename}`, {
            method: "DELETE"
        });
        if (!response.ok) {
            throw new Error(`Response status: ${response.status}`);
        } else {
            window.location.href = "/app";
        }
    } catch (error) {
        alert(`Remove unsuccessful. ${error.message}`);
        console.error(error.message);
    }
});

setEventListeners(commit, async () => {
    if (changes) {
        const map_filename = (new URLSearchParams(window.location.search)).get("element");
        let req_body = {};

        req_body["meta"] = {};
        req_body["throttle"] = {};
        req_body["motor"] = { 0: {}, 1: {} };

        if (map_name.style.backgroundColor == "blue") {
            req_body["meta"]["name"] = map_name.value;
        }
        if (map_id.style.backgroundColor == "blue") {
            req_body["meta"]["id"] = map_id.value;
        }
        if (map_description.style.backgroundColor == "blue") {
            req_body["meta"]["description"] = map_description.value;
        }

        for (let i = 1; i < throttle_table.rows[1].cells.length; i++) {
            if (throttle_table.rows[1].cells[i].style.backgroundColor == "blue") {
                req_body["throttle"][i - 1] = throttle_table.rows[1].cells[i].firstChild.value;
            }
        }

        for (let i = 1; i < motor_table.rows[1].cells.length; i++) {
            if (motor_table.rows[1].cells[i].style.backgroundColor == "blue") {
                req_body["motor"][0][i - 1] = motor_table.rows[1].cells[i].firstChild.value;
            }
        }

        for (let i = 1; i < motor_table.rows[2].cells.length; i++) {
            if (motor_table.rows[2].cells[i].style.backgroundColor == "blue") {
                req_body["motor"][1][i - 1] = motor_table.rows[2].cells[i].firstChild.value;
            }
        }

        try {
            const response = await fetch(`/app/edit?element=${map_filename}`, {
                method: "POST",
                body: JSON.stringify(req_body),
                headers: {
                    "Content-Type": "application/json",
                }
            });
            if (!response.ok) {
                throw new Error(`Response status: ${response.status}`);
            } else {
                window.location.href = "/app";
            }
        } catch (error) {
            alert(`Edit unsuccessful. ${error.message}`);
            console.error(error.message);
        }
    } else {
        alert("Nothing to commit.");
    }
});

setEventListeners(download, () => {
    const map_filename = (new URLSearchParams(window.location.search)).get("element");

    window.location.href = `/app/download?element=${map_filename}`;
});

var parsed_map = JSON.parse(map);

(function () {
    let data = [];

    const throttle_percentage_row = document.createElement("tr"),
        throttle_output_row = document.createElement("tr");

    throttle_percentage_row.appendChild(Object.assign(document.createElement("th"), { textContent: "Throttle Value" }));
    throttle_output_row.appendChild(Object.assign(document.createElement("th"), { textContent: "Throttle output" }));

    for (const i in Object.keys(parsed_map)) {
        let c_percentage = i * ((max_throttle * 100) / steps);
        let c_output = parseFloat(parsed_map[i][2]);

        data.push({ percentage: c_percentage, output: c_output });

        throttle_percentage_row.appendChild(Object.assign(document.createElement("td"), { textContent: `${c_percentage}%` }));

        throttle_output_row.appendChild(
            Object.assign(document.createElement("td"), {})
        ).appendChild(
            (() => {
                const input = Object.assign(document.createElement("input"), {
                    type: "text",
                    style: "width: 100%; height: 100%; box-sizing: border-box; font-size: 16px;",
                    placeholder: c_output
                })

                input.onchange = async function () {
                    if (this.value) {
                        let value = parseFloat(this.value);
                        if (!isNaN(value) && (value != this.placeholder)) {
                            if (this.style.backgroundColor != "blue") {
                                changes++;
                            }
                            this.parentElement.style.backgroundColor = "blue";
                            this.style.backgroundColor = "blue";
                            this.value = value;

                            throttle_chart.data.datasets[0].data[this.parentElement.cellIndex - 1] = value;
                            throttle_chart.update();
                        } else {
                            if (this.style.backgroundColor == "blue") {
                                this.parentElement.style.backgroundColor = "";
                                this.style.backgroundColor = "";
                                changes--;

                                throttle_chart.data.datasets[0].data[this.parentElement.cellIndex - 1] = this.placeholder;
                                throttle_chart.update();
                            }
                            this.value = "";
                        }
                    } else {
                        this.parentElement.style.backgroundColor = "";
                        this.style.backgroundColor = "";
                        changes--;

                        throttle_chart.data.datasets[0].data[this.parentElement.cellIndex - 1] = this.placeholder;
                        throttle_chart.update();
                    }
                }

                return input;
            })()
        );
    }

    throttle_table.appendChild(throttle_percentage_row);
    throttle_table.appendChild(throttle_output_row);

    const throttle_chart = new Chart(
        throttle_plot,
        {
            type: "line",
            data: {
                labels: data.map(row => row.percentage),
                datasets: [
                    {
                        label: "Throttle output",
                        data: data.map(row => row.output)
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false
            }
        }
    );
})();

(function () {
    let data = [];

    const rpm_row = document.createElement("tr"),
        motor_current_row = document.createElement("tr"),
        motor_brake_current_row = document.createElement("tr");

    rpm_row.appendChild(Object.assign(document.createElement("th"), { textContent: "RPM" }));
    motor_current_row.appendChild(Object.assign(document.createElement("th"), { textContent: "Max motor current" }));
    motor_brake_current_row.appendChild(Object.assign(document.createElement("th"), { textContent: "Max motor brake current" }));

    for (const i in Object.keys(parsed_map)) {
        let c_rpm = i * (max_rpm / steps);
        let c_mc = parseInt(parsed_map[i][0]);
        let c_mbc = parseInt(parsed_map[i][1]);
        data.push({ rpm: c_rpm, motor_current: c_mc, motor_brake_current: c_mbc });

        rpm_row.appendChild(Object.assign(document.createElement("td"), { textContent: c_rpm }));

        motor_current_row.appendChild(
            Object.assign(document.createElement("td"), {})
        ).appendChild(
            (() => {
                const input = Object.assign(document.createElement("input"), {
                    type: "text",
                    style: "width: 100%; height: 100%; box-sizing: border-box; font-size: 16px;",
                    placeholder: c_mc
                })

                input.onchange = async function () {
                    if (this.value) {
                        let value = parseInt(this.value);
                        if (!isNaN(value) && (value != this.placeholder)) {
                            if (this.style.backgroundColor != "blue") {
                                changes++;
                            }
                            this.parentElement.style.backgroundColor = "blue";
                            this.style.backgroundColor = "blue";
                            this.value = value;

                            motor_chart.data.datasets[0].data[this.parentElement.cellIndex - 1] = value;
                            motor_chart.update();
                        } else {
                            if (this.style.backgroundColor == "blue") {
                                this.parentElement.style.backgroundColor = "";
                                this.style.backgroundColor = "";
                                changes--;
                            }
                            this.value = "";

                            motor_chart.data.datasets[0].data[this.parentElement.cellIndex - 1] = this.placeholder;
                            motor_chart.update();
                        }
                    } else {
                        this.parentElement.style.backgroundColor = "";
                        this.style.backgroundColor = "";
                        changes--;

                        motor_chart.data.datasets[0].data[this.parentElement.cellIndex - 1] = this.placeholder;
                        motor_chart.update();
                    }
                }

                return input;
            })()
        );

        motor_brake_current_row.appendChild(
            Object.assign(document.createElement("td"), {})
        ).appendChild(
            (() => {
                const input = Object.assign(document.createElement("input"), {
                    type: "text",
                    style: "width: 100%; height: 100%; box-sizing: border-box; font-size: 16px;",
                    placeholder: c_mbc
                })

                input.onchange = async function () {
                    if (this.value) {
                        let value = parseInt(this.value);
                        if (!isNaN(value) && (value != this.placeholder)) {
                            if (this.style.backgroundColor != "blue") {
                                changes++;
                            }
                            this.parentElement.style.backgroundColor = "blue";
                            this.style.backgroundColor = "blue";
                            this.value = value;

                            motor_chart.data.datasets[1].data[this.parentElement.cellIndex - 1] = value;
                            motor_chart.update();
                        } else {
                            if (this.style.backgroundColor == "blue") {
                                this.parentElement.style.backgroundColor = "";
                                this.style.backgroundColor = "";
                                changes--;
                            }
                            this.value = "";

                            motor_chart.data.datasets[1].data[this.parentElement.cellIndex - 1] = this.placeholder;
                            motor_chart.update();
                        }
                    } else {
                        this.parentElement.style.backgroundColor = "";
                        this.style.backgroundColor = "";
                        changes--;

                        motor_chart.data.datasets[1].data[this.parentElement.cellIndex - 1] = this.placeholder;
                        motor_chart.update();
                    }
                }

                return input;
            })()
        );
    }

    motor_table.appendChild(rpm_row);
    motor_table.appendChild(motor_current_row);
    motor_table.appendChild(motor_brake_current_row);

    const motor_chart = new Chart(
        motor_plot,
        {
            type: "line",
            data: {
                labels: data.map(row => row.rpm),
                datasets: [
                    {
                        label: "Max motor current",
                        data: data.map(row => row.motor_current)
                    },
                    {
                        label: "Max motor brake current",
                        data: data.map(row => row.motor_brake_current)
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false
            }
        }
    );
})();

(function () {
    const map_meta_json = JSON.parse(map_meta);

    if ("name" in map_meta_json) {
        map_name.placeholder = map_meta_json["name"];
        map_name.value = "";
    }
    if ("id" in map_meta_json) {
        map_id.placeholder = map_meta_json["id"];
        map_id.value = "";
    }
    if ("description" in map_meta_json) {
        map_description.placeholder = map_meta_json["description"];
        map_description.value = "";
    }

    map_name.onchange = async function () {
        if (this.value == this.placeholder) {
            this.value = "";
            this.style.backgroundColor = "";
            this.parentElement.style.backgroundColor = "";
            changes--;
        } else {
            if (this.style.backgroundColor == "") {
                this.style.backgroundColor = "blue";
                this.parentElement.style.backgroundColor = "blue";
                changes++;
            }
        }
    }

    map_id.onchange = async function () {
        let value = parseInt(this.value);

        if (!isNaN(value)) {
            if (this.value == this.placeholder) {
                if (this.style.backgroundColor == "blue") {
                    this.style.backgroundColor = "";
                    this.parentElement.style.backgroundColor = "";
                    changes--;
                }
                this.value = "";
            } else {
                if (this.style.backgroundColor == "") {
                    this.style.backgroundColor = "blue";
                    this.parentElement.style.backgroundColor = "blue";
                    changes++;
                }
                this.value = value;
            }
        } else {
            if (this.style.backgroundColor == "blue") {
                this.style.backgroundColor = "";
                this.parentElement.style.backgroundColor = "";
                changes--;
            }

            this.value = "";
        }
    }

    map_description.onchange = async function () {
        if (this.value == this.placeholder) {
            this.value = "";
            this.style.backgroundColor = "";
            this.parentElement.style.backgroundColor = "";
            changes--;
        } else {
            if (this.style.backgroundColor == "") {
                this.style.backgroundColor = "blue";
                this.parentElement.style.backgroundColor = "blue";
                changes++;
            }
        }
    }
})();