let navBar = new Vue({
    el: '#navBar',
    data: {
        visible: true
    }
});

const carritoUsuario = [];

window.addEventListener("hashchange", () => {
    render(decodeURI(window.location.hash));
});

const render = url => {
    switch (url) {
        case "#registro":
            abrirRegistro();
            break;
        case "#iniciar-sesion":
            abrirInicioSesion();
            break;
        case "#usuarios/":
            abrirUsuarios();
            break;
        case "#usuarios/mi-cuenta":
            abrirMiCuenta();
            break;
        case "#usuarios/pagos":
            abrirCarrito();
            break;
        case "#staff/":
            abrirStaff();
            break;
        default:
            abrirPagPrin();
            return;
    }
};

const sectionP = document.getElementById("sectionP");
const contenedorInicioRegistro = document.getElementById("contenedorInicio-Registro");
const formInicioRegistro = document.getElementById("inicio_registro");
const sectionS = document.getElementById("sectionS");
const sectionCarrito = document.getElementById("sectionCarrito");

const manipularTopBar = status => {
    switch (status) {
        case 1:
            cambiarProgreso(25);
            break;
        case 2:
            cancelarTransicion();
            cambiarProgreso(50);
            break;
        case 3:
            cancelarTransicion();
            cambiarProgreso(75);
            break;
        default:
            cancelarTransicion();
            reiniciarTopBar();
    }
};

const abrirUsuarios = () => {

    const crearPlatos = () => {
        return new Promise((resolve, reject) => {
            const ajax = new XMLHttpRequest();
            ajax.onreadystatechange = () => {
                if (ajax.status === 200 && ajax.readyState === 4) {

                    const data = JSON.parse(ajax.responseText);
                    const divR = document.getElementById("productos");

                    let contenedor = document.createElement("div");
                    contenedor.className = "row";
                    let contador = 0;
                    for (const itemI in data) {
                        if (data.hasOwnProperty(itemI)) {
                            const item = data[itemI];
                            contador++;
                            if (contador >= 4) {
                                divR.appendChild(contenedor);
                                divR.appendChild(document.createElement("br"));
                                contenedor = document.createElement("div");
                                contenedor.className = "row";
                                contador = 1;
                            }

                            const itemDiv = document.createElement("div");
                            itemDiv.className = "col-4 caja plato";

                            const img = document.createElement("img");
                            img.className = "image";
                            img.src = item["imgUrl"];
                            itemDiv.appendChild(img);

                            const nombre = document.createElement("div");
                            nombre.className = "plato--Titulo";
                            nombre.innerText = item["nombre"];
                            itemDiv.appendChild(nombre);

                            itemDiv.appendChild(document.createElement("br"));

                            const descripcion = document.createElement("div");
                            descripcion.className = "plato--Descripcion";
                            descripcion.innerText = item["descripcion"];
                            itemDiv.appendChild(descripcion);
                            itemDiv.appendChild(document.createElement("br"));

                            const precioUnitario = document.createElement("div");
                            precioUnitario.className = "plato--Precio";
                            precioUnitario.innerText = `${item["precio"]}`;
                            itemDiv.appendChild(precioUnitario);

                            const cantidad = document.createElement("div");
                            cantidad.className = "plato--Cantidad";
                            cantidad.appendChild(document.createTextNode("Cantidad: "));
                            const unidades = document.createElement("span");
                            const botonMenos = document.createElement("i");
                            botonMenos.className = "material-icons plato--Cantidad--Icon";
                            botonMenos.innerText = "remove";
                            botonMenos.addEventListener("click",() => {
                                const valorActual = parseInt(unidades.innerText);
                                if (valorActual > 1) {
                                    unidades.innerText = valorActual-1;
                                } else {
                                    unidades.innerText = "1";
                                }
                            });

                            cantidad.appendChild(botonMenos);
                            unidades.innerText = "1";
                            cantidad.appendChild(unidades);
                            const botonMas = document.createElement("i");
                            botonMas.className = "material-icons plato--Cantidad--Icon";
                            botonMas.innerText = "add";
                            botonMas.addEventListener("click",() => {
                                const valorActual = parseInt(unidades.innerText);
                                if (valorActual > 0) {
                                    unidades.innerText = valorActual+1;
                                } else {
                                    unidades.innerText = "1";
                                }
                            });
                            cantidad.appendChild(botonMas);

                            itemDiv.appendChild(cantidad);
                            itemDiv.appendChild(document.createElement("br"));

                            const botonAddCart = document.createElement("button");
                            botonAddCart.className = "botonAddCart";
                            botonAddCart.addEventListener("click",() => {
                                const cantidad = parseInt(unidades.innerText);
                                if (cantidad > 0) {
                                    const item = data[itemI];
                                    item["cantidad"] = cantidad;

                                    //  carritoUsuario[itemI] = item;

                                     carritoUsuario.push(item);
                                    console.log(`JSON del usuario|>\n${JSON.stringify(carritoUsuario)}`);
                                    window.location.replace("./#usuarios/pagos");
                                } else {
                                    alert("");
                                }
                            });
                            botonAddCart.innerHTML = "<i class='material-icons'>add_shopping_cart</i> Añadir al carrito";
                            itemDiv.appendChild(botonAddCart);

                            contenedor.appendChild(itemDiv);
                        }
                    }
                    divR.appendChild(contenedor);

                    resolve();
                }
            };

            ajax.open("POST", "./usuarios/platos.json", true);
            ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            ajax.send();
        });
    };

    const ajax = new XMLHttpRequest();

    reiniciarTopBar();
    cerrarElemF(contenedorInicioRegistro);
    cerrarElemF(formInicioRegistro);
    cerrarElemF(sectionP);
    cerrarElemF(sectionCarrito);

    ajax.onreadystatechange = () => {
        if (ajax.status === 200 && ajax.readyState === 4) {

            cambiarProgreso(100).then(ocultarTopBar);

            abrirElemF(sectionS, () => {
                sectionS.innerHTML = ajax.responseText;
                crearPlatos();
            });
        } else {
            manipularTopBar(ajax.readyState);
        }
    };

    ajax.open("POST", "./usuarios/index.php", true);
    ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    ajax.send();
};

const abrirMiCuenta = () => {
    const ajax = new XMLHttpRequest();

    reiniciarTopBar();
    cerrarElemF(contenedorInicioRegistro);
    cerrarElemF(formInicioRegistro);
    cerrarElemF(sectionP);
    cerrarElemF(sectionCarrito);

    ajax.onreadystatechange = () => {
        if (ajax.status === 200 && ajax.readyState === 4) {

            cambiarProgreso(100).then(ocultarTopBar);

            abrirElemF(sectionS, () => {
                sectionS.innerHTML = ajax.responseText;
            });

        } else {
            manipularTopBar(ajax.readyState);
        }
    };

    ajax.open("POST", "./usuarios/mi-cuenta.php", true);
    ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    ajax.send();
};

const abrirCarrito = () => {

    reiniciarTopBar();
    cerrarElemF(contenedorInicioRegistro);
    cerrarElemF(formInicioRegistro);
    cerrarElemF(sectionP);
    cerrarElemF(sectionS);

    /* Metodo antiguo
    const ajax = new XMLHttpRequest();

    ajax.onreadystatechange = () => {
        if (ajax.status === 200 && ajax.readyState === 4) {

            cambiarProgreso(100).then(ocultarTopBar);

            abrirElemF(sectionCarrito, () => {
                sectionCarrito.innerHTML = ajax.responseText;
                crearCarrito();
            });

            sectionCarrito.setAttribute("vacio","false");
        } else {
            manipularTopBar(ajax.readyState);
        }
    };

    ajax.open("POST", "./usuarios/pagos.php", true);
    ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    ajax.send();
        */

    /* Metodo con Vue */
    abrirElemF(sectionCarrito);

};

const abrirStaff = () => {
    const ajax = new XMLHttpRequest();

    reiniciarTopBar();
    cerrarElemF(contenedorInicioRegistro);
    cerrarElemF(formInicioRegistro);
    cerrarElemF(sectionP);
    cerrarElemF(sectionCarrito);

    ajax.onreadystatechange = () => {
        if (ajax.status === 200 && ajax.readyState === 4) {

            cambiarProgreso(100).then(ocultarTopBar);

            abrirElemF(sectionS, () => {
                sectionS.innerHTML = ajax.responseText;
            });

        } else {
            manipularTopBar(ajax.readyState);
        }
    };

    ajax.open("POST", "./staff/", true);
    ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    ajax.send();
};

const abrirInicioSesion = () => {
    const ajax = new XMLHttpRequest();

    reiniciarTopBar();
    cerrarElemF(contenedorInicioRegistro);
    cerrarElemF(sectionP);
    cerrarElemF(sectionCarrito);

    ajax.onreadystatechange = () => {
        if (ajax.status === 200 && ajax.readyState === 4) {

            cambiarProgreso(100).then(ocultarTopBar);

            const elem = document.getElementById("inicio_registro");
            abrirElemF(elem, () => {
                elem.innerHTML = ajax.responseText
            });

        } else {
            manipularTopBar(ajax.readyState);
        }
    };

    ajax.open("POST", "./iniciar-sesion.php", true);
    ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    ajax.send();
};

const abrirRegistro = () => {
    const ajax = new XMLHttpRequest();

    reiniciarTopBar();

    cerrarElemF(contenedorInicioRegistro);
    cerrarElemF(sectionP);
    cerrarElemF(sectionCarrito);

    ajax.onreadystatechange = () => {
        if (ajax.status === 200 && ajax.readyState === 4) {

            cambiarProgreso(100).then(ocultarTopBar);

            const elem = document.getElementById("inicio_registro");
            abrirElemF(elem, () => {
                elem.innerHTML = ajax.responseText
            });

        } else {
            manipularTopBar(ajax.readyState);
        }
    };

    ajax.open("POST", "./registro.php", true);
    ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    ajax.send();
};

const abrirPagPrin = () => {
    const inicio_registro = document.getElementById("inicio_registro");
    cerrarElemF(inicio_registro, () => inicio_registro.innerHTML = "");
    cerrarElemF(sectionS, () => sectionS.innerHTML = "");
    cerrarElemF(sectionCarrito);
    abrirElemF(contenedorInicioRegistro);
    abrirElemF(sectionP);
};

/* Height Transition by CSS Tricks. Returns a Promise */
const collapseSection = element => {
    return new Promise((resolve, reject) => {

        // get the height of the element's inner content, regardless of its actual size
        let sectionHeight = element.scrollHeight;

        // temporarily disable all css transitions
        let elementTransition = element.style.transition;
        element.style.transition = '';

        // on the next frame (as soon as the previous style change has taken effect),
        // explicitly set the element's height to its current pixel height, so we
        // aren't transitioning out of 'auto'


        requestAnimationFrame(function () {
            element.style.height = sectionHeight + 'px';
            element.style.transition = elementTransition;

            // on the next frame (as soon as the previous style change has taken effect),
            // have the element transition to height: 0
            requestAnimationFrame(function () {
                element.style.height = 0 + 'px';
                setTimeout(() => {
                    resolve("Termine de ocultar we v':");
                }, 160);
            });
        });

        // mark the section as "currently collapsed"
        element.setAttribute('data-collapsed', 'true');
    });
};

const expandSection = element => {
    return new Promise((resolve, reject) => {
        // get the height of the element's inner content, regardless of its actual size
        let sectionHeight = element.scrollHeight;

        // have the element transition to the height of its inner content
        element.style.height = sectionHeight + 'px';

        // when the next css transition finishes (which should be the one we just triggered)
        element.addEventListener('transitionend', function (e) {
            // remove this event listener so it only gets triggered once
            element.removeEventListener('transitionend', arguments.callee);

            // remove "height" from the element's inline styles, so it can return to its initial value
            element.style.height = null;
            setTimeout(() => {
                resolve("Termine de ampliar we v':");
            }, 0);
        });

        // mark the section as "currently not collapsed"
        element.setAttribute('data-collapsed', 'false');
    });
};

const abrirElemF = (element, midF, postF) => {
    if (element.getAttribute("data-collapsed") === "true") {
        if (midF !== undefined)
            midF();
        expandSection(element).then(() => {
            if (postF !== undefined)
                postF();
        });
    } else {
        collapseSection(element).then(() => {
            if (midF !== undefined)
                midF();
            expandSection(element).then(() => {
                if (postF !== undefined)
                    postF();
            });
        });
    }
};

const cerrarElemF = (element, postF) => {
    if (element.getAttribute("data-collapsed") === "false") {
        collapseSection(element).then(() => {
            if (postF !== undefined)
                postF();
        });
    }
};

render(decodeURI(window.location.hash));


const carrito = new Vue({
    el: "#carrito",
    data: {
        item: carritoUsuario,
        descuento: 0
    },
    computed: {
        cantidadItems: function () {
            let items = 0;
            for (const i in this.item)
                items++;
            return items;
        },
        subTotal: function () {
            let subT = 0;
            for (const itemI in this.item ) {
                if (this.item.hasOwnProperty(itemI)){
                    const item = this.item[itemI];
                    subT += (item["precio"] * item["cantidad"]);
                }
            }
            return subT;
        },
        total: function () {
            return this.subTotal - this.descuento;
        },
        noEstaVacio: function () {
            for (const i in this.item) {
                return true;
            }
            return false;
        },
    },
    methods: {
        restarCantidad: function (elem) {
            const cantidad = parseInt(elem.cantidad);
            if (cantidad > 0)
                elem.cantidad = cantidad -1;
        },
        aumentarCantidad: function (elem) {
            const cantidad = parseInt(elem.cantidad);
            if (cantidad >= 0)
                elem.cantidad = cantidad+1;
        }
    }
});

/* Metodo con Antiguo
const crearCarrito = () => {
    carrito = new Vue({
        el: "#carrito",
        data: {
            item: carritoUsuario,
            descuento: 0
        },
        computed: {
            cantidadItems: function () {
                let items = 0;
                for (const i in this.item)
                    items++;
                return items;
            },
            subTotal: function () {
                let subT = 0;
                for (const itemI in this.item ) {
                    if (this.item.hasOwnProperty(itemI)){
                        const item = this.item[itemI];
                        subT += (item["precio"] * item["cantidad"]);
                    }
                }
                return subT;
            },
            total: function () {
                return this.subTotal - this.descuento;
            },
            noEstaVacio: function () {
                for (const i in this.item) {
                    return true;
                }
                return false;
            },
        },
        methods: {
            restarCantidad: function (elem) {
                const cantidad = parseInt(elem.cantidad);
                if (cantidad > 0)
                    elem.cantidad = cantidad -1;
            },
            aumentarCantidad: function (elem) {
                const cantidad = parseInt(elem.cantidad);
                if (cantidad >= 0)
                    elem.cantidad = cantidad+1;
            }
        }
    });
};
*/