GOWNOCODE (BY VOVA)

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");
        };
    },

    initBrandCards()
    {
        kernel.getBrandCards().forEach(function(cardElem)
        {
            cardElem.onmouseover = function()
            {
                kernel.enableBrandCard(cardElem);
            };
            cardElem.onmouseout = function()
            {
                kernel.disableBrandCard(cardElem);
            };
        });
    },

    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()
    {
        var errorElement = kernel.ce("div");
        errorElement.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.ce("div");
        heading.className = "heading";
        heading.innerText = text;
        kernel.getBody().appendChild(heading);
    },

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

    renderBrandCards()
    {
        kernel.resetBody();
        kernel.setBodyHeading("Бренды");
        var container = kernel.ce("div");
        container.className = "brands";
        var card, cardContents, cardText, cardButton;
        kernel.dataModel.brands.forEach(function(brand, ind, arr)
        {
            card         = kernel.ce("div");
            cardContents = kernel.ce("div");
            cardText     = kernel.ce("div");
            cardButton   = kernel.ce("div");
            bgImageData  = kernel.ce("div");

            card.className          = "brand-card";
            cardContents.className  = "contents";
            cardText.className      = "text";
            cardButton.className    = "button";
            bgImageData.id          = brand.img;

            cardButton.innerText = "ПЕРЕЙТИ К БРЕНДУ";
            cardText.innerText   = brand.description;

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

            card.appendChild(cardContents);
            card.appendChild(bgImageData);
            kernel.disableBrandCard(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();
                kernel.initBrandCards();
            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);
    },

    ce(tagName)
    {
        return document.createElement(tagName);
    }
}

window.onload = kernel.initialize;