var loader = '<div class="loader spinner-border text-success" role="status"><span class="visually-hidden">Loading...</span></div>';
document.addEventListener('DOMContentLoaded', ()=>{
    let listType = localStorage.getItem('listType');
    viewList(listType);
});
function ajx(type, url, data = null, r = 'json') {
    let result = null;
    let params = data!=null ? new URLSearchParams(data).toString() : data;
    let contentType = 'application/x-www-form-urlencoded';
    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.readyState != 4) {return;}
        if (xhr.status == 200) {try {result = r==='json' ? JSON.parse(xhr.responseText) : xhr.responseText;} catch {result = xhr.responseText;}} else {console.log(`XMLHttpRequest ${xhr.status} : ${xhr.statusText}`);}
    };
    if (type.toLowerCase() == 'get' && params!=null) {url = url + '?' + params;}
    xhr.open(type, url, false);
    xhr.withCredentials = true;
    xhr.setRequestHeader('Content-type', contentType);
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    xhr.send(params);
    return result;
}
function postJson(url, data = {}) {
    let result = null;
    let params = data!=null ? JSON.stringify(data) : '{}';
    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.readyState != 4) {return;}
        if (xhr.status == 200) {
            try {result = JSON.parse(xhr.responseText)}
            catch {result = xhr.responseText;}
        } else {console.log(xhr, `XMLHttpRequest ${xhr.status} : ${xhr.statusText}`);}
    };
    xhr.open('POST', url, false);
    xhr.withCredentials = true;
    xhr.overrideMimeType('application/json');
    xhr.setRequestHeader('Content-type', 'application/json');
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    xhr.send(params);
    return result;
}
function createHTML(htmlStr) {
    var frag = document.createDocumentFragment(),
        temp = document.createElement('div');
    temp.innerHTML = htmlStr;
    while (temp.firstChild) {
        frag.appendChild(temp.firstChild);
    }
    return frag;
}

if (!HTMLElement.prototype.css) {
    HTMLElement.prototype.css = function (params){
        for(var k in params){
            this.style[k] = params[k];
        }
    }
}


function showCompatibility(b,id){
    let card = b.closest('.category_product_item > .card');
    let container = card.querySelector('.dropup-container');
    container.classList.add('d-flex','align-items-center','justify-content-center');
    container.innerHTML = loader;
    container.classList.remove('d-none');
    let res = ajx('get', `${catalog_url}/json/compatibility`, {'id': id, 'short': 1}, 'text');
    if (res) {
        container.classList.remove('d-flex','align-items-center','justify-content-center');
        container.innerHTML = res;
    }
    setTimeout(()=>{
        let close = container.querySelector('.btn-close');
        close.addEventListener('click', (e)=>{
            container.innerHTML = '';
            container.classList.remove('d-flex','align-items-center','justify-content-center');
            container.classList.add('d-none');
            document.removeEventListener('keydown', f2);
        });
        var f1 = (e) => {
            const withinBoundaries = e.composedPath().includes(container);
            if ( ! withinBoundaries ) {
                container.innerHTML = '';
                container.classList.remove('d-flex','align-items-center','justify-content-center');
                container.classList.add('d-none');
                document.removeEventListener('click', f1);
            }
        };
        var f2 = (e) => {
            if( e.key == 27 || e.keyCode == 27 ){
                container.innerHTML = '';
                container.classList.remove('d-flex','align-items-center','justify-content-center');
                container.classList.add('d-none');
                document.removeEventListener('keydown', f2);
            }
        };

        document.addEventListener('click', f1);
        document.addEventListener('keydown', f2);
    },100);
}

function viewList(type){
    if( document.querySelector('.product-cards') ) {
        switch (type) {
            case 'list':
                document.querySelector('.product-cards').classList.add('product-cards-list');
                break;
            case 'grid':
            default:
                document.querySelector('.product-cards').classList.remove('product-cards-list');
                break;
        }
        localStorage.setItem('listType', type);
    }
}