const sherlock_body = document.querySelector('body'),
    sherlock_form = sherlock_input.parentNode;
    
var vy_iskali = [],
    pop_tovary = [],
    pop_cats = [],
    found_cats = [],
    found_prods = [],
    all_search_results = [],
    pristupaem_k_poisku = [];

let sherlock_root = document.documentElement;
sherlock_root.style.setProperty('--sherlock_accent_color', sherlock_accent_color);

vy_iskali['ru'] = 'Вы уже искали';
vy_iskali['ua'] = 'Ви вже шукали';
vy_iskali['en'] = 'You have already searched';

pop_tovary['ru'] = 'Популярные товары';
pop_tovary['ua'] = 'Популярні товари';
pop_tovary['en'] = 'Popular Products';

pop_cats['ru'] = 'Популярные категории';
pop_cats['ua'] = 'Популярні категорії';
pop_cats['en'] = 'Popular Categories';

found_cats['ru'] = 'Найденные категории';
found_cats['ua'] = 'Знайдені категорії';
found_cats['en'] = 'Found Categories';

found_prods['ru'] = 'Найденные товары';
found_prods['ua'] = 'Знайдені товари';
found_prods['en'] = 'Found Products';

all_search_results['ru'] = 'Все результаты поиска';
all_search_results['ua'] = 'Всі результати пошуку';
all_search_results['en'] = 'All Search Results';

pristupaem_k_poisku['ru'] = 'Приступаем к поиску';
pristupaem_k_poisku['ua'] = 'Приступаємо до пошуку';
pristupaem_k_poisku['en'] = 'Starting Search';

sherlock_input.type = 'search';
// sherlock_input.required = true;
sherlock_form.style.position = "relative";

var sherlock_overlay = document.createElement('div'),
    sherlock_results = document.createElement('div'),
    sherlock_results_left = document.createElement('div'),
    sherlock_results_right = document.createElement('div'),
    sherlock_results_footer = document.createElement('a'),
    sherlock_results_loader = document.createElement('div'),
    start_data_loaded = false;

sherlock_overlay.classList.add('sherlock_overlay');
sherlock_results.classList.add('sherlock_results');
sherlock_results_left.classList.add('sherlock_results_left');
sherlock_results_right.classList.add('sherlock_results_right');
sherlock_results_footer.classList.add('sherlock_results_footer');
sherlock_results_loader.classList.add('sherlock_results_loader');
// sherlock_results.style.top = (sherlock_input.offsetHeight+1)+'px';

sherlock_form.insertAdjacentElement('afterend',sherlock_overlay);
sherlock_form.insertAdjacentElement('beforeend',sherlock_results);
sherlock_results.insertAdjacentElement('beforeend',sherlock_results_left);
sherlock_results.insertAdjacentElement('beforeend',sherlock_results_right);
sherlock_results.insertAdjacentElement('beforeend',sherlock_results_footer);
sherlock_results.insertAdjacentElement('beforeend',sherlock_results_loader);
// sherlock_results_left.innerText = 'left column';
// sherlock_results_right.innerText = 'right column';

if (sherlock_swap_columns) {
    sherlock_results.classList.add('swaped_columns');
}

var sherlock_popular_cats = document.createElement('div'),
    sherlock_popular_prods = document.createElement('div'),
    sherlock_results_cats = document.createElement('div'),
    sherlock_results_prods = document.createElement('div'),
    sherlock_history_div = document.createElement('div');
sherlock_history_div.classList.add('sherlock_history__wrapper');
sherlock_popular_cats.classList.add('sherlock_popular_cats');
sherlock_popular_cats.innerHTML = '<div class="h3">'+pop_cats[sherlock_lang]+'</h3>';
sherlock_results_left.insertAdjacentElement('afterbegin',sherlock_popular_cats);
sherlock_popular_prods.classList.add('sherlock_popular_prods');
sherlock_popular_prods.innerHTML = '<div class="h3">'+pop_tovary[sherlock_lang]+'</div>';
sherlock_results_right.insertAdjacentElement('afterbegin',sherlock_popular_prods);
sherlock_results_cats.classList.add('sherlock_results_cats');
sherlock_results_cats.classList.add('active');
sherlock_results_cats.innerHTML = '<div class="h3">'+found_cats[sherlock_lang]+'</div>';
sherlock_results_left.insertAdjacentElement('beforeend',sherlock_results_cats);
sherlock_results_prods.classList.add('.sherlock_results_prods');
sherlock_results_prods.innerHTML = '<div class="h3">'+found_prods[sherlock_lang]+'</div>';
sherlock_results_right.insertAdjacentElement('beforeend',sherlock_results_prods);
sherlock_show_popular();

sherlock_overlay.style.zIndex = 10000000;
sherlock_form.style.zIndex = 10010000;

function start_sherlock_loader() { sherlock_results.classList.add('loading'); }
function stop_sherlock_loader() { sherlock_results.classList.remove('loading'); }
function sherlock_show_popular() {
    sherlock_results_cats.style.display = 'none';
    sherlock_results_prods.style.display = 'none';
    sherlock_popular_cats.style.display = 'block';
    sherlock_popular_prods.style.display = 'block';
    sherlock_history_div.style.display = 'block';
    sherlock_results_cats.classList.remove('active');
    sherlock_popular_cats.classList.add('active');
}
function sherlock_show_results() {
    sherlock_results_cats.style.display = 'block';
    sherlock_results_prods.style.display = 'block';
    sherlock_popular_cats.style.display = 'none';
    sherlock_popular_prods.style.display = 'none';
    sherlock_history_div.style.display = 'none';
    sherlock_results_cats.classList.add('active');
    sherlock_popular_cats.classList.remove('active');
}

window.addEventListener('load', function(event) {
    console.log('sherlock init');
}, false);

window.addEventListener('resize', function(event) {
    window_risezed();
}, false);
window_risezed();

function window_risezed() {
    var current_width = parseInt(document.body.clientWidth);
    // console.log(current_width);
    if (current_width < sherlock_mobile_width) {
        sherlock_results.classList.add('sherlock_mobile_view');
    } else {
        sherlock_results.classList.remove('sherlock_mobile_view');
    }
}

sherlock_overlay.addEventListener('click', function(event) {
    sherlock_body.classList.remove('in_search');
}, false);

sherlock_input.addEventListener('focus', function(event) {
    if (!start_data_loaded) {
        load_start_data();
    }
    sherlock_body.classList.add('in_search');
    search_results(this.value);
}, false);
sherlock_input.addEventListener('blur', function(event) {
    // sherlock_body.classList.remove('in_search');
}, false);
sherlock_input.addEventListener('search', function(event) {
    sherlock_input.blur();
    sherlock_body.classList.remove('in_search');
    // event.preventDefault();
}, false);
sherlock_input.addEventListener('keyup', function(event) {
    var keypressed = event.key;
    if (keypressed === 'ArrowDown' || keypressed === 'ArrowUp' || keypressed === 'ArrowLeft' || keypressed === 'ArrowRight') {
        if (!!document.querySelector('.sherlock_selected')) {
            var selected_element = document.querySelector('.sherlock_selected'),
                par_sel_el = selected_element.parentNode;
            if (keypressed === 'ArrowDown') {
                selected_element.classList.remove('sherlock_selected');
                if (!!par_sel_el.nextElementSibling) {
                    par_sel_el.nextElementSibling.querySelector('a').classList.add('sherlock_selected');
                }
            }
            if (keypressed === 'ArrowUp') {
                selected_element.classList.remove('sherlock_selected');
                if (!!par_sel_el.previousElementSibling) {
                    par_sel_el.previousElementSibling.querySelector('a').classList.add('sherlock_selected');
                }
            }
        } else {
            if (!!sherlock_results_left.querySelector('.active ul li a')) {
                sherlock_results_left.querySelector('.active ul li a').classList.add('sherlock_selected');
            }
        }
    } else {
        var og_val = this.value;
        setTimeout(() => {
            if (this.value === og_val) {
                // console.log('start ajax');
                search_results(this.value);
            }
        }, 500);
    }
}, false);
sherlock_form.addEventListener('submit', function(event) {
    var form_value = sherlock_input.value.toString().trim().toLowerCase();
    event.preventDefault();
    if (!!document.querySelector('.sherlock_selected')) {
        var gotourl = document.querySelector('.sherlock_selected').href;
        window.location.href = gotourl;
    } else {
        if (form_value.length > 0) {
            add_search_to_cookies(form_value);
            sherlock_results_footer.innerText = pristupaem_k_poisku[sherlock_lang]+'...';
            sherlock_form.submit();
        }
    }
}, false);
sherlock_results_footer.addEventListener('click', function(event) {
    var form_value = sherlock_input.value.toString().trim().toLowerCase();
    add_search_to_cookies(form_value);
    sherlock_results_footer.innerText = pristupaem_k_poisku[sherlock_lang]+'...';
    // event.preventDefault();
}, false);

function search_results(value) {
    if (!!document.querySelector('.sherlock_selected')) {
        document.querySelector('.sherlock_selected').classList.remove('sherlock_selected');
    }
    thisval = value.toString().trim().toLowerCase();
    if (thisval.length > 0) {
        start_sherlock_loader();
        sherlock_results.classList.remove('without_footer');
        sherlock_results_footer.href = '/?search='+thisval;
        sherlock_results_footer.innerText = all_search_results[sherlock_lang]+' «'+thisval+'»';
        sherlock_results_footer.style.display = 'block';

        const requrl = '/modules/sherlock.php?act=search&search='+thisval+'&lang='+sherlock_lang+'&max_products='+max_products+'&max_filters='+max_filters+'&rand='+Math.random();
        /* console.log(requrl); */
        const request = new XMLHttpRequest();
        request.open('GET', requrl);
        request.setRequestHeader('Content-Type', 'application/x-www-form-url');
        request.addEventListener("readystatechange", () => {
            if (request.readyState === 4 && request.status === 200) {
                if (!!document.querySelector('.sherlock_results_cats_ul')) { document.querySelector('.sherlock_results_cats_ul').remove(); }
                if (!!document.querySelector('.sherlock_results_prods_ul')) { document.querySelector('.sherlock_results_prods_ul').remove(); }
                var otvet = JSON.parse(request.responseText),
                res_products = otvet.products,
                res_filters = otvet.filters;
                // console.log(otvet);
                var sherlock_results_prods_ul = document.createElement('ul');
                sherlock_results_prods_ul.classList.add('sherlock_results_prods_ul');
                res_products.forEach(element => {
                    // console.log(element);
                    sherlock_results_prods_ul.innerHTML += sherlock_prod_template(element.title,element.url,element.img,element.price,element.oldprice);
                });
                sherlock_results_prods.insertAdjacentElement('beforeend',sherlock_results_prods_ul);
                var sherlock_results_cats_ul = document.createElement('ul');
                sherlock_results_cats_ul.classList.add('sherlock_results_cats_ul');
                res_filters.forEach(element => {
                    // console.log(element);
                    sherlock_results_cats_ul.innerHTML += '<li><a href="'+element.url+'">'+element.title+'</a></li>';
                });
                sherlock_results_cats.insertAdjacentElement('beforeend',sherlock_results_cats_ul);
                stop_sherlock_loader();
                sherlock_show_results();
            }
        });
        request.send();
    } else {
        sherlock_results.classList.add('without_footer');
        sherlock_results_footer.style.display = 'none';
        sherlock_show_popular();
    }
}

function load_start_data() {
    start_sherlock_loader();
    if (!!sh_getCookie('sherlock_history')) {
        var sherlock_history = sh_getCookie('sherlock_history').toString().trim().split('|'),
            sherlock_history_div_content = '<div class="h3">'+vy_iskali[sherlock_lang]+'</div><ul class="sherlock_history">';
        sherlock_history.forEach((element,i) => {
            if (i<max_history_results) {
                sherlock_history_div_content += '<li data-search="'+element+'">'+element+'</li>';
            }
        });
        sherlock_history_div_content += '</ul>';
        sherlock_history_div.innerHTML = sherlock_history_div_content;
        sherlock_results_left.insertAdjacentElement('afterbegin',sherlock_history_div);
        document.querySelectorAll('.sherlock_history li').forEach(element => {
            element.addEventListener('click', function(event) {
                var tosearch = this.dataset.search;
                sherlock_input.value = tosearch;
                sherlock_input.focus();
            }, false);
        });
    }
    const requrl = '/modules/sherlock.php?act=getpopular&lang='+sherlock_lang+'&max_products='+popular_porducts+'&max_filters='+popular_filters+'&rand='+Math.random();
    // console.log(requrl);
    const request = new XMLHttpRequest();
    request.open('GET', requrl);
    request.setRequestHeader('Content-Type', 'application/x-www-form-url');
    request.addEventListener("readystatechange", () => {
        if (request.readyState === 4 && request.status === 200) {
            var otvet = JSON.parse(request.responseText),
                pop_products = otvet.products,
                pop_filters = otvet.filters,
                to_pop_prods = document.createElement('ul'),
                to_pop_cats = document.createElement('ul');
            to_pop_prods.classList.add('pop_prods');
            pop_products.forEach(element => {
                // console.log(element);
                to_pop_prods.innerHTML += sherlock_prod_template(element.title,element.url,element.img,element.price,element.oldprice);
            });
            pop_filters.forEach(element => {
                // console.log(element);
                to_pop_cats.innerHTML += '<li><a href="'+element.url+'">'+element.title+'</a></li>';
            });
            sherlock_popular_cats.insertAdjacentElement('beforeend',to_pop_cats);
            sherlock_popular_prods.insertAdjacentElement('beforeend',to_pop_prods);
            stop_sherlock_loader();
            start_data_loaded = true;
        }
    });
    request.send();
}

function sherlock_prod_template(title,url,img,price,oldprice) {
    var toreturn = '';
    toreturn += '<li><a class="sherlock_prod_link" href="'+url+'"><span class="sherlock_prod_image"><img loading="lazy" src="'+img+'" alt="'+title+'"></span><span class="sherlock_prod_letters"><span class="sherlock_prod_title">'+title+'</span>';
    if (parseInt(oldprice) > 0) {
        toreturn += '<span class="sherlock_prod_price sherlock_prod_price_red">'+price+'</span>';
        toreturn += '<span class="sherlock_prod_oldprice">'+oldprice+'</span>';
    } else {
        toreturn += '<span class="sherlock_prod_price">'+price+'</span>';
    }
    toreturn += '</span></a></li>';
    return toreturn
}

function add_search_to_cookies(word) {
    var sherlock_history = [];
    if (!!sh_getCookie('sherlock_history')) {
        sherlock_history = sh_getCookie('sherlock_history').toString().trim().split('|');
    }
    sherlock_history.unshift(word);
    sherlock_history = sherlock_unique_arr(sherlock_history);
    sh_setCookie('sherlock_history',sherlock_history.join('|'));
}

function sherlock_unique_arr(arr) {
    let result = []; for (let str of arr) { if (!result.includes(str)) { result.push(str); } }
    return result;
}

/* cookies */
function sh_getCookie(e,t=!1){if(!e)return;let n=document.cookie.match(new RegExp("(?:^|; )"+e.replace(/([.$?*|{}()\[\]\\\/+^])/g,"\\$1")+"=([^;]*)"));if(n){let e=decodeURIComponent(n[1]);if(t)try{return JSON.parse(e)}catch(e){}return e}}
function sh_setCookie(e,t,n={path:"/"}){if(!e)return;(n=n||{}).expires instanceof Date&&(n.expires=n.expires.toUTCString()),t instanceof Object&&(t=JSON.stringify(t));let o=encodeURIComponent(e)+"="+encodeURIComponent(t);for(let e in n){o+="; "+e;let t=n[e];!0!==t&&(o+="="+t)}document.cookie=o}
function sh_deleteCookie(e){setCookie(e,null,{expires:new Date,path:"/"})}
/* cookies */