SHITCODE (REFRACTORED)

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

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

    disableBrandCard(card)
    {
        card.children[0].style.visibility = "hidden";
        card.style.backgroundImage = kernel.url(card.children[1].id);
    },

    getParams()
    {

    },

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

    renderError()
    {
        errorElement = kernel.createElem(
        {
            "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(
        {
            "className" : "heading",
            "innerText" : text
        });
        kernel.getBody().children[0] = heading;
    },

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

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

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

    createBrandCard(description, image)
    {
        return kernel.createElem(
        {
            "className" : "brand-card",
            "children"  :
            [
                {
                    "className" : "contents",
                    "children"  :
                    [
                        {
                            "className" : "text",
                            "innerText" : description
                        },

                        {
                            "className" : "button",
                            "innerText" : "ОТКРЫТЬ БРЕНД"
                        }
                    ]
                },

                {
                    "id" : image
                }
            ]
        });
    },

    renderBrandCards()
    {
        kernel.resetBody();
        kernel.setBodyHeading("Бренды");
        var container = kernel.createBrandsContainer();
        var card;
        kernel.dataModel.brands.forEach(function(brand)
        {
            card = kernel.createBrandCard(brand.description, brand.img);
            kernel.initBrandCard(card);
            container.appendChild(card);
        });
        kernel.getBody().appendChild(container);
    },

    getCats()
    {
        var response = kernel.APIRequest(
        {
            "method" : "getCats"
        });
        if(!response.code)
        {
            kernel.dataModel.cats = response;
        }
        else
        {
            kernel.error(response.msg);
        };
    },

    url(path)
    {
        return `url(${path})`;
    },

    createCatsContainer()
    {
        return kernel.createElem(
        {
            "className" : "cats"
        });
    },

    createCat(title, image)
    {
        return kernel.createElem(
        {
            "className" : "cat",
            "children"  :
            [
                {
                    "className" : "image",
                    "style"     :
                    {
                        "backgroundImage" : kernel.url(image)
                    }
                },

                {
                    "className" : "title",
                    "innerText" : title
                },

                {
                    "className" : "button",
                    "innerText" : "ОТКРЫТЬ КАТЕГОРИЮ"
                }
            ]
        });
    },

    initCat()
    {

    },

    renderCats()
    {
        kernel.resetBody();
        kernel.setBodyHeading("Категории продукции");
        var cat;
        var container = kernel.createCatsContainer();
        kernel.dataModel.cats.forEach(function(cat)
        {
            cat = kernel.createCat(cat.name, cat.img);
            kernel.initCat(cat);
            container.appendChild(cat);
        });
        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);
                kernel.getCats();
                kernel.renderCats();
            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(virtualDOM)
    {
        var element = document.createElement(virtualDOM.tagName || "div");
        for(propName in virtualDOM)
        {
            var propVal = virtualDOM[propName];
            switch(propName)
            {
                case "children":
                    if(propVal.forEach)
                    {
                        propVal.forEach(function(child, ind, arr)
                        {
                            element.appendChild(kernel.createElem(child));
                        });
                    }
                    else
                    {
                        element.appendChild(kernel.createElem(propVal));
                    };
                break;

                default:
                    element[propName] = propVal;
                break;
            };
        };
        return element;
    }
}

window.onload = kernel.initialize;