"use strict";

window.addEventListener('DOMContentLoaded', function () {
    const host = "http://localhost:8080";
    const table = document.getElementById("tbody");
    const form = document.getElementById("form");
    const priceInput = document.getElementById("price");
    const nameInput = document.getElementById("name");
    const idInput = document.getElementById("id");
    const removeBtn = document.getElementById("removeBtn");
    const editBtn = document.getElementById("editBtn");
    const timestampInput = document.getElementById("timestamp");

    const getData = async function () {
        table.innerHTML = "";
        const response = await fetch(host + "/ticket");
        const data = await response.json();
        data.forEach(ticket => {
            table.innerHTML +=
                `<tr>
                        <th scope="row">${ticket.id}</th>
                        <td>${ticket.name}</td>
                        <td>${ticket.price}</td>
                        <td>${ticket.timestamp}</td>
                    </tr>`;
        })
    }
    async function create(name, price, timestamp) {
        const requestParams = {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            }
        };
        const response = await fetch(host + `/ticket?name=${name}&price=${price}&timestamp=${timestamp}`, requestParams);
        return await response.json();
    }
    async function remove(id) {
        const requestParams = {
            method: "DELETE",
        };
        const response = await fetch(host + `/ticket/${id}`, requestParams);
        return await response.json();
    }
    async function edit(id, name, price) {
        const requestParams = {
            method: "PUT",
            headers: {
                "Content-Type": "application/json",
            }
        };
        const response = await fetch(host + `/ticket/${id}?name=${name}&price=${price}`, requestParams);
        return await response.json();
    }

    form.addEventListener("submit", function (event) {
        event.preventDefault();
        create(nameInput.value, priceInput.value, timestampInput.value).then((result) => {
            getData();
            nameInput.value = "";
            priceInput.value = "";
            timestampInput.value = "";
            //alert(`Ticket[id=${result.id}, name=${result.name}, price=${result.price}, timestamp=${result.timetamp}]`);
        });
    });

    removeBtn.addEventListener("click", function (event) {
        event.preventDefault();
        remove(idInput.value).then((result) => {
            getData();
            nameInput.value = "";
            priceInput.value = "";
            timestampInput.value = "";
            idInput.value = "";
        });
    });

    editBtn.addEventListener("click", function (event) {
        event.preventDefault();
        edit(idInput.value, nameInput.value, priceInput.value).then((result) => {
            getData();
            nameInput.value = "";
            priceInput.value = "";
            idInput.value = "";
        });
    });

    getData();
});