var itemsList = {},
    clientsList = {},
    tableHeader = document.getElementById('table-header'),
    docsWrapper = document.getElementById('docsWrapper'),
    mainWrapper = document.getElementById('main-wrapper'),
    firstDateInput = document.getElementById('firstDate'),
    clientSelect = document.getElementById('clientSelect'),
    secDateInput = document.getElementById('secDate'),
    table = document.getElementById('table');

//Extract all items and clients from the main JSON and put them into two associative arrays
function generateRef(obj) {
    for (var a = 0; a < obj.length; a++) {
        var currentDate = obj[a].docDate;
        if (checkIfDateIsValid(currentDate.slice(6, currentDate.length), currentDate.slice(4, 6), currentDate.slice(0, 4))) {
            fillclientsList(obj[a].client, obj[a]);
            for (var b = 0; b < obj[a].Items.length; b++) {
                checkItems(obj[a].client, obj[a].Items[b]);
            }
        }
    }
}

function checkItems(client, march) {
    if (itemsList[march.name]) {
        if (itemsList[march.name][client]) {
            itemsList[march.name][client] = Number(itemsList[march.name][client]) + Number(march.quantity);
        } else {
            itemsList[march.name][client] = Number(march.quantity);
        }
    } else {
        itemsList[march.name] = {};
        itemsList[march.name][client] = Number(march.quantity);
    }
}

function fillclientsList(name, obj) {
    if (clientsList[name]) {
        if (clientsList[name][obj.docNumber]) {
            return;
        } else {
            clientsList[name][obj.docNumber] = {
                docDate: obj.docDate,
                Items: obj.Items
            };
        }
    } else {
        clientsList[name] = {};
        clientsList[name][obj.docNumber] = {
            docDate: obj.docDate,
            Items: obj.Items
        };
    }
}

function buildTable() {

    function fillHeader() {
        var strArray = [];
        strArray.push('<div class="table-row"><div class="plain-cell">&nbsp;</div><div class="plain-cell">No</div>');
        for (var key in clientsList) {
            strArray.push('<div class="plain-cell no-print">' + key + '</div>')
        }
        strArray.push('<div class="plain-cell">Общо планирани</div><div class="plain-cell">Количество от склад</div><div class="plain-cell">Блокирани</div><div class="plain-cell">Разлика</div></div>');
        tableHeader.innerHTML = strArray.join('');
        tableHeader.children[0].style.width = (tableHeader.children[0].children.length * 80 + 140) + 'px';
        mainWrapper.style.width = (tableHeader.offsetWidth + 2) + 'px';
        docsWrapper.style.width = tableHeader.offsetWidth + 'px';
    }
    fillHeader();

    function fillRows() {
        var strArray = [],
            counter = 1,
            totalRowItems = 0,
            totalColItems = 0,
            allItems = 0;

        for (var key in itemsList) {
            strArray.push('<div class="table-row"><div class="plain-cell">' + key + '</div><div class="plain-cell">' + counter + '</div>')
            for (var name in clientsList) {
                if (itemsList[key][name]) {
                    strArray.push('<div class="plain-cell no-print">' + itemsList[key][name] + '</div>')
                    totalRowItems += Number(itemsList[key][name]);
                } else {
                    strArray.push('<div class="plain-cell no-print">' + 0 + '</div>')
                }
            }
            var calculateQuantity = store[key].quantity - store[key].blocked - totalRowItems;
            strArray.push('<div class="plain-cell">' + totalRowItems + '</div><div class="plain-cell">' + store[key].quantity + '</div>' +
                          '<div class="plain-cell">' + store[key].blocked + '</div>' +
                          '<div class="plain-cell">' + calculateQuantity + '</div></div>');
            counter++;
            totalRowItems = 0;
        }
        table.innerHTML = strArray.join('');

        printTotalQuantity(clientsList, itemsList);
    }
    fillRows();
}

//Visualize all documents from client chosen by click on the header
tableHeader.addEventListener('click', function (e) {
    var target = e.target.innerText,
        checkBiggerWidth = 0;
    if (target == 'No' || target == 'Общо планирани' || target == 'Количество от склад' ||
        target == 'Блокирани' || target == 'Разлика' || target.trim() == '') {
        return;
    }

    changeHeaderAfterClick(target);
    alert(1);
    resizeConteiners(docsWrapper.childNodes[0].childElementCount * 80 + 140)


    if (target == 'Всички') {
        buildTable();
        docsWrapper.innerHTML = '';
    }
});

function fillTableAfterClick(targetName) {
    var strArray = [],
        invoiceNumber = [],
        invoiceDate = [],
        iterationCounter = 0,
        isElementFound = false,
        countRowItems = 0,
        allItems = 0;

    invoiceNumber.push('<div class="table-row no-print"><div class="plain-cell">Док.ном</div><div class="plain-cell">&nbsp;</div>')
    invoiceDate.push('<div class="table-row no-print"><div class="plain-cell">Дата</div><div class="plain-cell">&nbsp;</div>')

    var itemsArr = extractItemsFromClient(clientsList[targetName]);
    for (var name in itemsArr) {
        strArray.push('<div class="table-row"><div class="plain-cell">' + name + '</div><div class="plain-cell">&nbsp;</div>');

        for (var key in clientsList[targetName]) {
            if (iterationCounter < Object.keys(clientsList[targetName]).length) {
                var currentDate = clientsList[targetName][key].docDate;
                invoiceNumber.push('<div class="plain-cell">' + key + '</div>')
                invoiceDate.push('<div class="plain-cell">' + currentDate.slice(6, currentDate.length) + '.' + currentDate.slice(4, 6) + '.' + currentDate.slice(0, 4) + '</div>')
            }

            for (var i = 0; i < clientsList[targetName][key].Items.length; i++) {
                if (clientsList[targetName][key].Items[i].name == name) {
                    strArray.push('<div class="plain-cell no-print">' + clientsList[targetName][key].Items[i].quantity + '</div>');
                    countRowItems += Number(clientsList[targetName][key].Items[i].quantity);
                    isElementFound = true;
                    break;
                }
            }
            if (!isElementFound) {
                strArray.push('<div class="plain-cell no-print">&nbsp;</div>');
            }
            isElementFound = false;
            iterationCounter++;
        }
        var quantitydifference = Number(store[name].quantity) - Number(store[name].blocked) - countRowItems;
        strArray.push('<div class="plain-cell">' + countRowItems + '</div><div class="plain-cell">' + store[name].quantity + '</div>' +
            '<div class="plain-cell">' + store[name].blocked + '</div><div class="plain-cell">' + quantitydifference + '</div></div>');
        allItems += countRowItems;
        countRowItems = 0;
    }

    invoiceNumber.push('<div class="plain-cell">&nbsp;</div><div class="plain-cell">&nbsp;</div><div class="plain-cell">&nbsp;</div><div class="plain-cell">&nbsp;</div></div>')
    invoiceDate.push('<div class="plain-cell">&nbsp;</div><div class="plain-cell">&nbsp;</div><div class="plain-cell">&nbsp;</div><div class="plain-cell">&nbsp;</div></div>')
    docsWrapper.innerHTML = invoiceNumber.join('') + invoiceDate.join('');
    table.innerHTML = strArray.join('');
    printTotalQuantity(clientsList[targetName]);
}

function printTotalQuantity(obj, items) {
    var strArray = ['<div class="table-row"><div class="plain-cell">Общо</div><div class="plain-cell">&nbsp;</div>'],
        docQuantity = 0,
        allItems = 0;

    for (var prop in obj) {
        if (items == undefined) {
            for (var h = 0; h < obj[prop].Items.length; h++) {
                docQuantity += Number(obj[prop].Items[h].quantity);
            }
        }
        else {
            for (var z in items) {
                if (items[z][prop]) {
                    docQuantity += Number(items[z][prop]);
                }
            }
        }
        strArray.push('<div class="plain-cell no-print">' + docQuantity + '</div>');
        allItems += docQuantity;
        docQuantity = 0;
    }
    strArray.push('<div class="plain-cell">' + allItems + '</div></div>');
    table.innerHTML += strArray.join('');
}

function extractItemsFromClient(client) {
    var result = {};
    for (var prop in client) {
        for (var i = 0; i < client[prop].Items.length; i++) {
            if (!result[client[prop].Items[i].name]) {
                result[client[prop].Items[i].name] = {};
            }
        }
    }
    return result;
}

document.getElementById('show-reference').addEventListener('click', checkIfDatesInputAreActive);

document.getElementById('firstDate').addEventListener('change', fillSelectWithClients);

document.getElementById('secDate').addEventListener('change', fillSelectWithClients);

function fillSelectWithClients() {
    if (firstDateInput.value && secDateInput.value) {
        clientSelect.innerHTML = '<option>Всички</option>'
        itemsList = {};
        clientsList = {};
        generateRef(json);

        for (var name in clientsList) {
            clientSelect.innerHTML += '<option>' + name + '</option';
        }
    }
}

function changeHeaderAfterClick(name) {
    tableHeader.innerHTML = '<div class="table-row"><div class="plain-cell">&nbsp;</div><div class="plain-cell">No</div><div class="plain-cell no-print">' + name + '</div><div class="plain-cell no-print" id="empty-cell"></div><div class="plain-cell">Общо планирани</div>' +
                    '<div class="plain-cell">Количество от склад</div><div class="plain-cell">Блокирани</div><div class="plain-cell">Разлика</div></div>';
    fillTableAfterClick(name);
    tableHeader.childNodes[0].firstChild.innerText = 'Всички';
}

function checkIfDatesInputAreActive() {
    var clientSelectValue = clientSelect.options[clientSelect.selectedIndex].innerText;

    if (firstDateInput.value && secDateInput.value) {
        docsWrapper.innerHTML = '';

        if (clientSelectValue != 'Всички') {
            changeHeaderAfterClick(clientSelectValue);
            fillTableAfterClick(clientSelectValue);
            return;
        }

        clientsList = {};
        itemsList = {};

        generateRef(json);
        buildTable();
    }
}

function checkIfDateIsValid(day, month, year) {
    var firstDateInput = document.getElementById('firstDate'),
      secDateInput = document.getElementById('secDate'),
      regEx = /[0-9]+/g,
      firstDateArray,
      secDateArray;

    firstDateArray = firstDateInput.value.match(regEx);
    secDateArray = secDateInput.value.match(regEx);
    if (firstDateArray && secDateArray) {
        var prevDate = new Date(firstDateArray[0], (firstDateArray[1] - 1), firstDateArray[2], 0, 0, 0, 0);
        var currentDate = new Date(secDateArray[0], (secDateArray[1] - 1), secDateArray[2], 0, 0, 0, 0);

        if (prevDate > currentDate) {
            console.log(1);
            return;
        }

        var productDate = new Date(year, (Number(month) - 1), Number(day), 0, 0, 0, 0);
        if (productDate.valueOf() >= prevDate.valueOf() && productDate.valueOf() <= currentDate.valueOf()) {
            return true;
        } else {
            return false;
        }
    }
}

document.getElementById('checkBox').addEventListener('change', function () {
    console.log(this.checked);

    if (!this.checked) {
        document.head.innerHTML += '<style>.no-print{display:none}</style>';
        resizeConteiners(table.offsetWidth);
    }
    else {
        document.head.removeChild(document.getElementsByTagName('style')[0]);
        resizeConteiners(table.childNodes[0].childElementCount * 80 + 140);
    }

});

function resizeConteiners(size) {
    docsWrapper.style.width = size + 'px';
    mainWrapper.style.width = size + 2 + 'px';
    tableHeader.childNodes[0].style.width = size + 'px';
    if (docsWrapper.childElementCount == 0) return;
    document.getElementById('empty-cell').style.width = (docsWrapper.offsetWidth - 700) + 'px';
    if (docsWrapper.children[0].children.length <= 7) { document.getElementById('empty-cell').style.display = 'none' }
}