Mini Kabibi Habibi

DXSK8.Desktop.ProductCategory = function (params) {

    var utils = DXSK8.Desktop.utils,
        allBrands = ko.observableArray();

    DXSK8.db.Brands
        .load({
            select: ["Name", "Id"],
        })
        .done(function(results) {
            $.each(results, function(index, brand) {
                brand.imageSrc = brand.__metadata.media_src;
            });
            allBrands(results);
            viewModel.brandsLoaded(true);
        });

    var setSelectedBrand = function (brand) {
        if(viewModel.selectedBrand()) {
            viewModel.selectedBrand().selected(false);
        }
        
        brand.selected(true);
        viewModel.selectedBrand(brand);
        viewModel.products(brand.products);
        viewModel.selectProduct(brand.products[0]);
        viewModel.showNavButtonInGallery(brand.products.length > 3);
        viewModel.userInteractionInGallery(brand.products.length > 3);
    };

    var cart = DXSK8.cart;

    var viewModel = {
        title: ko.observable(),
        brands: ko.observableArray(),
        selectedBrand: ko.observable(),
        product: ko.observable(),
        products: ko.observableArray(),
        
        itemClick: function(item) {
            var brand = item.itemData;
            setSelectedBrand(brand);
        },

        selectProduct: function(product) {
            var product = product.itemData || product;
            if (viewModel.product()) {
                viewModel.product().selected(false);
            }
            product.selected(true);
            viewModel.product(product);
        },
        toggleInCart: function(e) {
            var product = e.model;
            if(cart.containsProduct(product)) {
                cart.remove(product);
            }
            else {
                cart.add(product);
            }
        },
        inCart: ko.observable(false),
        showNavButtonInGallery: ko.observable(false),
        userInteractionInGallery: ko.observable(false),
        brandsLoaded: ko.observable(false),
        productsLoaded: ko.observable(false)
    };

    viewModel.inCart = ko.computed(function() {
        return cart.containsProduct(viewModel.product());
    });
    viewModel.toggleInCartText = ko.computed(function() {
        return viewModel.inCart() ? "Remove from order" : "Add to order";
    });

    ko.computed(function() {
        var _allBrands = allBrands();

        var source = DXSK8.db.Products.load({
            select: ["Brand.Id", "Id", "Name", "Price", "Type.Id", "Type.Name", "Description"],
            filter: [["Type.Id", Number(params.categoryId)]]
        }).done(function(products) {
            viewModel.productsLoaded(true);
            viewModel.title(products[0].Type.Name);
            DevExpress.data.query(products)
                .groupBy("Brand.Id")
                .enumerate()
                .done(function(groups) {
                    var groupMap = {};
                    currentBrandsId = $.each(groups, function(index, group) { groupMap[group.key] = group.items; });
                    var brands = $.map(_allBrands, function(brand) {
                        if(groupMap[brand.Id]) {
                            brand.productCount = groupMap[brand.Id].length;
                            brand.products = groupMap[brand.Id];
                            brand.selected = ko.observable(false);
                            $.each(brand.products, function (index, product) {
                                product.formatPrice = Globalize.format(Number(product.Price), "C");
                                product.Brand.Name = brand.Name;
                                product.Description = utils.createProductFeatures(product.Description);
                                product.selected = ko.observable(false);
                            });
                            return brand;
                        }
                    })
                    viewModel.brands(brands);
                    if(brands.length) {
                        setSelectedBrand(brands[0]);
                    }
            });
        });
    });

    return viewModel;
};