VIEWALMACEN

/* eslint-disable no-return-assign */
/* eslint-disable no-unused-vars */
/* eslint-disable indent */
/**
 * @file fichero view de la práctica 6.1
 * Queremos introducir una mejora en el
 * ejercicio 5.1.
 *
 * @author Jose Gracia Berenguer
 * @link https://cipfpbatoi.github.io/materials/daw/dwc/01-js/06-eventos.html#escuchadores-de-eventos enunciado.
 */


/**
 * Summary Añadir productos al almacén: deberemos pasarle el
 * nombre del producto y su precio por unidad.
 * Como código tomará automáticamente el siguiente
 * al mayor del almacén (como si fuera un campo autonumérico).
 * Llamado desde el index.html.
 */
function newProd() {
    this.newProdAlmacen();
    const tabla = document.getElementById('MiTabla');
    const producto = almacen.products[almacen.products.length - 1];
    tabla.innerHTML += this.createElementTable(producto);
    setTimeout(() => {
        this.deHighlightTr(document.getElementById(`trProducto${producto.id}`), 0);
        this.actualizaImporteTotal();
        this.deshabilitarDecrementarUnidades(almacen.products[almacen.products.length - 1]
            .id);
    }, 1000);
    createEvents2(producto);
}

function createEvents2(producto) {
    document.getElementById(`removeTdBtn${producto.id}`).addEventListener('click', (event) => {
        event.preventDefault();
        console.log("hpña");
        this.delProdTable(producto.id);
    });
}

/**
 * Summary es llamada desde el index.html y crea una lista
 * desordenada y lo pinta alfabéticamente o por número
 * de unidades descendentes.
 */
function listProducts() {
    const tipoOrden = document.getElementById('listadoAlmacenOpcion').value;
    const lista = document.getElementById('listadoProductos');
    lista.innerHTML = '';
    if (tipoOrden === 'alfa') {
        almacen.orderByName().forEach((element) => lista.innerHTML += `<li class='list-group-item'>${element}</li>`);
    } else {
        almacen.orderByUnits().forEach((element) => lista.innerHTML += `<li class='list-group-item'>${element}</li>`);
    }
}


/**
 * Summary es llamada desde el index.html y crea una lista
 * desordenada y lo pinta alfabéticamente o por número
 * de unidades descendentes y con un filtro de unidades
 * con menos de X stock.
 */
function listUnderStock() {
    const unidades = document.getElementById('uStockUnits');
    const tipoOrden = document.getElementById('listadoUStockOpcion').value;
    const lista = document.getElementById('listadoProductos');
    lista.innerHTML = '';
    if (tipoOrden === 'alfa') {
        const arrayOrdenado = almacen.orderByName();
        const uStock = almacen.underStockArray(unidades.value, arrayOrdenado);
        uStock.forEach((element) => lista.innerHTML += `<li class='list-group-item'>${element}</li>`);
    } else {
        const arrayOrdenado = almacen.orderByUnits();
        const uStock = almacen.underStock(unidades.value, arrayOrdenado).reverse();
        uStock.forEach((element) => lista.innerHTML += `<li class='list-group-item'>${element}</li>`);
    }
}


/**
 * Summary se ejecuta cada vez que se llama a las funciones
 * stockProd() o delProd(), y calcula el importe total
 * de todos los productos y lo pinta debajo de la tabla.
 */
function actualizaImporteTotal() {
    const importe = document.getElementById('importeTotal');
    importe.innerHTML = `${almacen.totalImport()} €`;
}


/**
 * Summary función que pinta en la tabla un producto.
 * @param {object} producto producto a pintar.
 */
function createElementTable(producto) {
    return `<tr id='trProducto${producto.id}' class='highlight'><td>${
        producto.id}</td> <td>${producto.name}</td> <td>${
        producto.units}</td> <td>${producto.price}</td> <td>${
        producto.productImport().toFixed(2)
        }</td> <td style="display:inline-flex">
        <form style="border:none"><button id="removeTdBtn${
        producto.id}" type="submit" class="btn btn-danger"><i class="material-icons">delete_forever</i></button>
        </form>` +
        `<form style="border:none"><button id="editTdBtn${
        producto.id}" class="btn btn-info"><i class="material-icons">edit</i></button></form>
    <form style="border:none"><button id="increment${
            producto.id}" class="btn btn-dark increment"><i class="material-icons">arrow_upward</i></button></form>
            <form style="border:none"><button id="decrement${
                producto.id}" class="btn btn-dark decrement"><i class="material-icons">arrow_downward</i></button></form>
                </td></tr>`;
}

/**
 * Incrementa una unidad de un producto,
 * llamado desde los botones de la tabla.
 * @param {number} id del producto a incrementar.
 */
function incrementOneUnit(id) {
    almacen.changeProductUnits(id, 1);
    document.getElementById(`trProducto${id}`).innerHTML = createElementTable(almacen.findProduct(id));
    setTimeout(() => {
        deHighlightTr(document.getElementById(`increment${id}`), 1000);
        actualizaImporteTotal();
        habilitarDecrementarUnidades(id);
    }, 0);
    createEvent();
}

/**
 * Decrementa una unidad de un producto,
 * llamado desde los botones de la tabla.
 * @param {number} id del producto a incrementar.
 */
function decrementOneUnit(id) {
    almacen.changeProductUnits(id, -1);
    document.getElementById(`trProducto${id}`).innerHTML = createElementTable(almacen.findProduct(id));
    setTimeout(() => {
        deHighlightTr(document.getElementById(`decrement${id}`), 1000);
        actualizaImporteTotal();
        if (almacen.findProduct(id) !== undefined && almacen.findProduct(id).units === 0) {
            deshabilitarDecrementarUnidades(id);
        }
    }, 0);
    createEvent();
}


/**
 * Función que añade un sombreado rojo al añadir o al modificar un
 * producto (elemento) durante X tiempo (time).
 *
 * @param {object} elemento elemento a hacer highlight.
 * @param {number} time milisegundos que va a estar highlighteado.
 */
function deHighlightTr(elemento, time) {
    if (elemento.classList.contains('highlight')) {
        setTimeout(() => {
            elemento.classList.remove('highlight');
            return true;
        }, time);
    } else {
        setTimeout(() => {
            elemento.classList.add('highlight');
        }, 0);
        setTimeout(() => {
            elemento.classList.remove('highlight');
            return true;
        }, time);
    }
}

/**
 * Deshabilita (añade la clase 'disabled')
 * a una td que contenga la id del producto recibida.
 * @param {number} id id del producto.
 */
function deshabilitarDecrementarUnidades(id) {
    document.getElementById(`decrement${id}`).classList.add('disabled');
}

/**
 * Habilita (quita la clase 'disabled')
 * a una td que contenga la id del producto recibida.
 * @param {number} id id del producto.
 */
function habilitarDecrementarUnidades(id) {
    document.getElementById(`decrement${id}`).classList.remove('disabled');
}

/**
 * Elimina visualmente una td de la tabla
 * que contaenga la id del producto recibido.
 * @param {number} id id del producto.
 */
function removeFromTableTr(id) {
    document.getElementById(`trProducto${id}`).parentNode.removeChild(document.getElementById(`trProducto${id}`));
}


/**
 * Summary se prepara el formulario de añadir
 * elementos para que se puedan editar elementos
 * se añaden y eliminan clases y se cambian nombres,
 */
function changeProdTable(id) {
    const producto = almacen.findProduct(id);
    document.getElementById('addProductsMain').classList.remove('hidden');
    document.getElementById('newUdsForm').classList.remove('hidden');
    document.getElementById('idHidden').classList.remove('hidden');
    document.getElementById('idHiddenName').classList.remove('hidden');
    document.getElementById('idHidden').value = producto.id;
    document.getElementById('new-name').value = producto.name;
    document.getElementById('newUnits').value = producto.units;
    document.getElementById('new-price').value = producto.price;
    document.getElementById('addProdBtn').innerHTML = 'Modificar';
    document.getElementById('new-name').focus();
}