GOWNOCODE BY VOVA GOWNOCODER #2

window.kernel =
{
    dataModel : {},

    initialize()
    {
        console.log("Getting ready...");
        kernel.initEventListeners();
        kernel.setView("brands");
        console.log("Ready");
    },

    initNavbar()
    {
        kernel.getNavs().forEach(function(elem)
        {
            elem.onclick = function()
            {
                kernel.setView(elem.id);
            };
        });
    },

    initEventListeners()
    {
        kernel.initNavbar();
        kernel.initCartButton();
        kernel.initAddBrandButton();
    },

    initCartButton()
    {
        kernel.ge("#cart").onclick = function()
        {
            kernel.setView("cart");
        };
    },

    initAddBrandButton()
    {
        kernel.ge("#addBrand").onclick = function()
        {
            kernel.setView("addBrand");
        };
    },

    getBrandCards()
    {
        return kernel.gea(".brand-card");
    },

    enableBrandCard(card)
    {
        card.style.background = "white";
        card.children[0].style.visibility = "visible";
    },

    disableBrandCard(card)
    {
        card.children[0].style.visibility = "hidden";
        card.style.background = `url(${card.children[1].id})`;
        card.style.backgroundSize = "cover";
    },

    getParams()
    {

    },

    getBody()
    {
        return kernel.ge(".body");
    },

    renderError()
    {
        errorElement = kernel.createElem("div",
        {
            "className" : "error"
        });
        kernel.getBody().appendChild(errorElement);
    },

    error(message)
    {
        message = !message ? "Error." : message;
        kernel.renderError(message);
        throw message;
    },

    getBrands()
    {
        var response = kernel.APIRequest(
        {
            "method"     : "getBrands",
            "parameters" : kernel.getParams()
        });
        if(!response.code)
        {
            kernel.dataModel.brands = response;
        }
        else
        {
            kernel.error(response.msg);
        };
    },

    encodeAPIRequest(request)
    {
        return btoa(JSON.stringify(request));
    },

    APIRequest(request)
    {
        var socket = new XMLHttpRequest();
        var encodedRequest = kernel.encodeAPIRequest(request);
        socket.open("GET", "/api/" + encodedRequest, false);
        socket.send();
        return JSON.parse(socket.responseText);
    },

    setBodyHeading(text)
    {
        var heading = kernel.createElem("div",
        {
            "className" : "heading",
            "innerText" : text
        });
        kernel.getBody().appendChild(heading);
    },

    resetBody()
    {
        kernel.getBody().innerHTML = "";
    },

    createBrandCard()
    {
        return kernel.createElem("div",
        {
            "className" : "brand-card"
        });
    },

    createBrandCardContents()
    {
        return kernel.createElem("div",
        {
            "className" : "contents"
        });
    },

    createBrandCardContainer()
    {
        return kernel.createElem("div",
        {
            "className" : "brands",
        });
    },

    createBrandCardText(text)
    {
        return kernel.createElem("div",
        {
            "className" : "text",
            "innerText" : text
        });
    },

    createBrandCardButton()
    {
        return kernel.createElem("div",
        {
            "className" : "button",
            "innerText" : "ПЕРЕЙТИ К БРЕНДУ"
        });
    },

    createBrandCardBgImageData(imageData)
    {
        return kernel.createElem("div",
        {
            "id"        : imageData
        });
    },

    initBrandCard(card)
    {
        card.onmouseover = function()
        {
            kernel.enableBrandCard(card);
        };
        card.onmouseout = function()
        {
            kernel.disableBrandCard(card);
        };
        kernel.disableBrandCard(card);
    },

    renderBrandCards()
    {
        kernel.resetBody();
        kernel.setBodyHeading("Бренды");
        var container = kernel.createBrandCardContainer();
        var card, cardContents, cardText, cardButton;
        kernel.dataModel.brands.forEach(function(brand, ind, arr)
        {
            card            = kernel.createBrandCard();
            cardContents    = kernel.createBrandCardContents();
            cardText        = kernel.createBrandCardText(brand.description);
            cardButton      = kernel.createBrandCardButton();
            bgImageData     = kernel.createBrandCardBgImageData(brand.img);

            cardContents.appendChild(cardText);
            cardContents.appendChild(cardButton);

            card.appendChild(cardContents);
            card.appendChild(bgImageData);
            kernel.initBrandCard(card);
            container.appendChild(card);
        });
        kernel.getBody().appendChild(container);
    },

    setView(view)
    {
        console.log(`Setting view: "${view}"`);
        kernel.currentView = view;
        switch(view)
        {
            case "brands":
                kernel.setActiveNav(view);
                kernel.getBrands();
                kernel.renderBrandCards();
            break;
            case "cats":
                kernel.setActiveNav(view);
            break;
            case "production":
                kernel.setActiveNav(view);
            break;
        };
    },

    getNavs()
    {
        return kernel.gea(".header-navs > .nav");
    },

    disableAllNavs()
    {
        kernel.getNavs().forEach(function(navElem)
        {
            navElem.className = "nav";
        });
    },

    enableNav(navId)
    {
        kernel.ge(`#${navId}`).className = "nav underlined";
    },

    setActiveNav(navId)
    {
        console.log(`Setting active nav: "${navId}"`);
        kernel.disableAllNavs();
        kernel.enableNav(navId);
    },

    ge(selector, context)
    {
        return (context || document).querySelector(selector);
    },

    gea(selector, context)
    {
        return (context || document).querySelectorAll(selector);
    },

    createElem(tagName, attrs)
    {
        var elem = document.createElement(tagName);
        for(attr in attrs)
        {
            elem[attr] = attrs[attr];
        };
        return elem;
    }
}

window.onload = kernel.initialize;