import { createApp } from 'https://unpkg.com/petite-vue@0.4.1/dist/petite-vue.es.js';

// añade una ventana de confirmación al intentar cambiar de página
const app = createApp({
    message: null,
    puestos: [],
    carreras: [],
    materias: [],
    usuarios: [],
    async nuevoPuesto(nuevoPuesto) {
        try {
            const res = await fetch('action/puesto.php', {
                method: 'POST',
                body: JSON.stringify({
                    puesto_nombre: nuevoPuesto
                })
            });
            const data = await res.json();
            this.puestos.push(data);
            // order by puesto.nombre
            this.puestos.sort((a, b) => a.nombre.localeCompare(b.nombre));
        }
        catch (error) {
            alert(`Error: ${error}`);
        }
    },
    to_delete: null,
    async eliminarPuesto(puesto_id) {
        try {
            const res = await fetch('action/puesto.php', {
                method: 'DELETE',
                body: JSON.stringify({
                    puesto_id
                })
            });
            const data = await res.json();
            this.message = data.msg;
            // after 3 seconds, remove the message
            setTimeout(() => {
                this.message = null;
            }, 3000);
            this.puestos = this.puestos.filter((p) => p.puesto_id !== puesto_id);
            // order by puesto.nombre
            this.puestos.sort((a, b) => a.nombre.localeCompare(b.nombre));
        }
        catch (error) {
            alert(`Error: ${error}`);
        }
    },
    async actualizarPuesto(puesto_id, materias, usuario_id) {
        try {
            const res = await fetch('action/puesto.php', {
                method: 'PUT',
                body: JSON.stringify({
                    puesto_id,
                    materias: materias.map(m => m.materia_id),
                    usuario_id
                })
            });
            const data = await res.json();
            this.message = data.msg;

            modificado = false;
            // after 3 seconds, remove the message
            setTimeout(() => {
                this.message = null;
            }, 3000);
        }
        catch (error) {
            alert(`Error: ${error}`);
        }
    },
    async descargar() {
        $('div.modal#cargando').modal('show');
        this.loading = true;
        try {
            const res = await fetch('action/action_puestos_excel.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
            });
            const blob = await res.blob();
            window.saveAs(blob, `puestos_${new Date().toISOString().slice(0, 10)}.xlsx`);
        }
        catch (error) {
            if (error.response && error.response.status === 413) {
                alert('Your request is too large! Please reduce the data size and try again.');
            }
            else {
                alert('An error occurred: ' + error.message);
            }
        }
        finally {
            $('#cargando').modal('hide');
            this.loading = false;
        }
    },

    async mounted() {
        this.puestos = await fetch('action/puesto.php').then(res => res.json());
        this.carreras = await fetch('action/action_carreras.php').then(res => res.json());
        this.materias = await fetch('action/action_materias.php').then(res => res.json());
        this.usuarios = await fetch('action/usuarios.php').then(res => res.json());
    }
}).mount('#app');