let listContainer = $("#dataList");
let displayedItems = [];
let fetchedData = {};

let currentMode = "sell";

let sellCLass = 'btn-danger';
let buyClass = 'btn-success';

$(document).ready(async function () {
    fetchedData = await AjaxManager.getAll();

    $('#sellButton').addClass(sellCLass);
    $('#saveButton').addClass(sellCLass);

    generateList();
    $('#buyButton').on('click', function () {
        if (!$(this).hasClass(buyClass)) {
            $(this).addClass(buyClass);
            $('#sellButton').removeClass(sellCLass);
            $('#saveButton').removeClass(sellCLass).addClass(buyClass);
            currentMode = "buy";
        }
    });
    $('#sellButton').on('click', function () {
        if (!$(this).hasClass(sellCLass)) {
            $(this).addClass(sellCLass);
            $('#buyButton').removeClass(buyClass);
            $('#saveButton').removeClass(buyClass).addClass(sellCLass);
            currentMode = "sell";
        }
    });
    $('#saveButton').on('click', function () {
        let values = getValues();
        let message = 'Voulez vous vraimer ajouter ces articles au stock ?<br><ul>';
        let color = 'green';
        if (currentMode === "sell"){
            message = 'Voulez vous vraiment supprimer ces articles du stock ?<br><ul>';
            color = 'red';
        }
        for (let  i = 0; i < values.length; i++) {
            if (values[i]['value'] > 0){
                message += '<li>' + fetchedData['articles'][i]['name'] + ' : ' + values[i]['value'] + '</li>'
            }
        }
        message += '</ul>';
        $.confirm({
            title: 'Confirmer',
            content: message,
            type: color,
            buttons: {
                formSubmit: {
                    text: 'Confirmer',
                    action: function () {
                        window.location.reload();
                    }
                },
                cancel: {
                    text: 'Annuler',
                }
            }
        });
        AjaxManager.saveStockChange(getFormattedValues(values), currentMode === "sell");
    });
});

function getListItem(item) {
    return (
        '<div class="grid-item">' +
        '<div class="grid-container">' +
        '<img class="list-image" src="../uploaded_images/' + item['id'] + '.jpg"/>' +
        '<p>' + item['name'] + '</p>' +
        '<p>Quantité : ' + item['quantity'] + '</p>' +
        '<input placeholder="Nombre" type="number" value="0" class="form-control"/>' +
        '</div>' +
        '</div>');
}


function generateList() {
    for (let i = 0; i < fetchedData['articles'].length; i++) {
        let listItem = getListItem(fetchedData['articles'][i]);
        displayedItems.push($(listItem));
        listContainer.append(displayedItems[i]);
    }
}


function getValues() {
    let values = [];
    for (let  i = 0; i < displayedItems.length; i++) {
        let value = displayedItems[i].find('input').val();
        let id = fetchedData['articles'][i]['id'];
        values.push({id: id, value: value});
    }
    return values;
}

function getFormattedValues(values) {
    let newValues = [];
    for (let  i = 0; i < values.length; i++) {
        if (values[i]['value'] > 0)
            newValues.push(values[i]);
    }
    return newValues;
}