const sonido = new Audio("/static/media/0457.wav");
const estadoAnterior = {};

let ultimoFooter = "";

function cargarTabla(endpoint, tablaId) {
    fetch(endpoint)
        .then(res => res.json())
        .then(filas => {
            const tbody = document.getElementById(tablaId);
            tbody.innerHTML = "";

            let sizeClass = "";
            if (filas.length <= 7) {
                sizeClass = "text-7xl px-4 py-2";
            } else {
                sizeClass = "text-5xl px-3 py-1"
            }

            filas.forEach(fila => {
                const id = fila[0];

                const tr = document.createElement("tr");

                const td1 = document.createElement("td");
                td1.textContent = fila[0];
                td1.className = `border bg-[#114b94] align-middle ${sizeClass}`;
                tr.appendChild(td1);

                const td2 = document.createElement("td");

                const estadoConsulta = fila[1];
                const estadoTurno = fila[3];

                if (estadoConsulta == 0) {
                    td2.textContent = "-";
                    td2.className = `border bg-[#a9a9a9] align-middle ${sizeClass}`;
                } else if (estadoConsulta == 1) {
                    td2.textContent = fila[2];
                    if (estadoTurno == 1) {
                        td2.className = `border blink-yellow align-middle ${sizeClass}`;
                    } else {
                        td2.className = `border bg-[#0a6eb2] align-middle ${sizeClass}`;
                    }
                } else {
                    td2.textContent = fila[2];
                    td2.className = `border bg-[#a9a9a9] align-middle ${sizeClass}`;
                }

                if (estadoAnterior[id] === 2 && estadoTurno === 1) {
                    sonido.play();
                }

                estadoAnterior[id] = estadoTurno;

                tr.appendChild(td2);
                tbody.appendChild(tr);
            });
        });
}

function cargarFooter() {
    fetch("/api/footer")
        .then(res => res.text())
        .then(data => {
            if (data !== ultimoFooter) {
                const footerText = document.getElementById("footer-text");
                const footerTextDuplicate = document.getElementById("footer-text-duplicate");

                footerText.innerHTML = data;
                footerTextDuplicate.innerHTML = data;

                ultimoFooter = data;
            }
        });
}

function actualizarTablas(){
    cargarTabla("/api/datos1","turnos1");
    cargarTabla("/api/datos2","turnos2");
}
cargarFooter();
actualizarTablas();
setInterval(actualizarTablas, 30000);
setInterval(cargarFooter, 45000);