var BASE_URL = 'http://192.168.1.127/api/';

function http(url, params) {
    return new Promise(function(resolve, reject) {
        httpRequest = new XMLHttpRequest();

        httpRequest.onreadystatechange = function() {
            if (httpRequest.readyState == XMLHttpRequest.DONE) {
                if (httpRequest.status == 200) {
                    resolve(JSON.parse(httpRequest.responseText));
                } else {
                    reject("pls fix later");
                }
            }
        };

        httpRequest.open('GET', url, true);
        httpRequest.setRequestHeader('lang', 'ES')
        var x = params ? params : null;
        httpRequest.send(null);
    });
}

http('http://192.168.1.127/api/products/listcategories').then(function(data) {

}, function(err) {
    console.log("err", err);
});

function logError(err) {
    console.log('Error: ', err);
}


var sections = [{
    name: 'empresa',
    view: true
}, {
    name: 'productos',
    view: false
}];

function fetchProducts(category) {
    return new Promise(function(resolve, reject) {
        var products = [];
        if (R.isNil(data.allProducts[category]) || R.isEmpty(data.allProducts[category])) {
            http(BASE_URL + 'products/category/' + category).then(function(xs) {
                resolve(xs)
            }, function(err) {
                reject(err);
            })
        } else {
            resolve(data.allProducts[category]);
        }
    })
}

function getProducts(category) {
    fetchProducts(category).then(function(xs) {
        data.products = [];
        data.allProducts[category] = xs;
        xs.forEach(function (x) {
            data.products.push(x);
        })
    })
}

var selectedSection_ = {
    empresa: true,
    productos: false
};

var selectedCategory_ = 'proteccion intensiva';

rivets.configure({
    executeFunctions: true
})

function getCategories() {
    if (productCategories_.length === 0) {
        http(BASE_URL + 'products/listcategories').then(function(data) {
            data.forEach(function(category) {
                productCategories_.push(category)
            })
        }, logError)
    }
}

var productCategories_ = [];
var productListEl = document.getElementsByClassName('product-list')[0];
var categoryNavEl = document.getElementById('product-category-nav');
var app = document.getElementById('app');
var data = {
    allProducts: {},
    products: [],
    selectedCategory: '',
    productDescription: {},
    productView: {
        list: true,
        description: false
    },
    getSectionData: {
        productos: getCategories,
        empresa: function() {}
    }
}



function getElement(selector) {
    return window.document.querySelectorAll(selector);
}

function chooseSection(section) {
    var navbarList = getElement('ul.navbar-list > li > a');
    sections.forEach(function (s) {
        var isSelected = s.name === section;
        s.view = isSelected;
        selectedSection_[s.name] = isSelected;
    })
    data.getSectionData[section]();
}
var elements = [];

function addSelectedClass(elemList, x) {
    elemList.forEach(function(el) {
        var isSelected = el.text === x;
        el.className = isSelected ? 'selected' : '';
    })
}

window.onscroll = function() {
    elements = elements.reduce(function(acc, e) {
        if (isInViewport(e)) {
            e.className = 'discover-li'
            return acc;
        } else {
            acc.push(e);
            return acc;
        }
    }, [])
    if (elements.length === 0) {
        window.onscroll = function() {};
    }
};

function isInViewport(element) {
    var rect = element.getBoundingClientRect();
    var html = document.documentElement;
    return (rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || html.clientHeight) &&
        rect.right <= (window.innerWidth || html.clientWidth))
}

window.onload = function() {
    var section = window.location.hash.substr(1)
    if (section !== '') {
        chooseSection(section, selectedSection_);
    }
    var view = rivets.bind(app, {
    sections: sections,
    selectedSection: selectedSection_,
    productCategories: productCategories_,
    data: data,
    selectedCategory: selectedCategory_,
    selectSection: function(event, scope) {
        var newValue = event.target.text;
        window.history.pushState({}, newValue, '#' + newValue)
        chooseSection(newValue, selectedSection_);
        event.target.className = 'selected';
    },
    selectCategory: function(event, scope) {
        data.productView.list = true;
        data.productView.description = false;
        var category = productCategories_.find(R.propEq('name', event.target.text));
        var categoryList = getElement('ul#product-category-nav > li > a')
        data.selectedCategory = category;
        getProducts(category._id);
        addSelectedClass(categoryList, category.name);
    },
    seeProduct: function(event, scope) {
        data.productView.list = false;
        data.productView.description = true;
        data.productDescription = data.products.find(R.propEq('name', event.target.text));
    }
});
}