document.addEventListener('DOMContentLoaded', function() {

    document.querySelectorAll('.resettable').forEach(function(element) {
        element.addEventListener('click', function() {
            console.log('reset');
            document.getElementById('filterForm').reset();
    
            var url = new URL(window.location.href);
            url.search = '';
            window.location.href = url.toString();
        });
    });


    function rangeInputChangeEventHandler(e) {
        var rangeGroup = this.getAttribute('name'),
            minBtn = this.parentElement.querySelector('.min'),
            maxBtn = this.parentElement.querySelector('.max'),
            range_min = this.parentElement.querySelector('.range_min'),
            range_max = this.parentElement.querySelector('.range_max'),
            origin = this.className;
            min = parseInt(maxBtn.getAttribute('min'));
            max = parseInt(maxBtn.getAttribute('max'));
            minVal = parseInt(minBtn.value);
            maxVal = parseInt(maxBtn.value);
    
            if (minVal > maxVal) {
                minBtn.value = maxVal;
                minVal = maxVal;
            }
    
            var min_percent = ((minVal - min) / (max - min)) * 100;
            var max_percent = ((maxVal - min) / (max - min)) * 100;
    
            range_min.textContent = minVal;
            range_max.textContent = maxVal;
    
/*             range_min.style.left = parseInt(min_percent )  + '%'; 
            range_max.style.left = parseInt(max_percent) + '%';   */     
    }
    
    document.querySelectorAll('input[type="range"]').forEach(function(rangeInput) {
        rangeInput.addEventListener('input', rangeInputChangeEventHandler);
    });

    var numProductsElement = document.getElementById('num_products');
    if (numProductsElement) {
        numProductsElement.addEventListener('change', function() {
            var numProducts = this.value;
            var url = new URL(window.location.href);
            url.searchParams.set('num_products', numProducts);
            window.location.href = url.toString();
        });
    }

    document.querySelectorAll('.sort-link').forEach(function(link) {
        link.addEventListener('click', function(event) {
            event.preventDefault();
            var url = new URL(window.location.href);
            url.searchParams.set('orderby', this.dataset.order);
            url.searchParams.set('order', this.dataset.orderby);
            window.location.href = url.toString();
        });
    });

    document.querySelectorAll('.add-to-favorites').forEach(button => {
        button.addEventListener('click', function() {
            var productId = this.getAttribute('data-product-id');
            var permalink = this.getAttribute('data-permalink');
            sendAddToFavoritesRequest(productId, permalink, button);
        });
    });

    function sendAddToFavoritesRequest(productId, permalink, button) {
        var xhr = new XMLHttpRequest();
        xhr.open('POST', permalink, true);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
        xhr.onload = function() {
            handleAddToFavoritesResponse(xhr, button);
        };
        xhr.send('action=add_to_favorites&product_id=' + productId);
    }

    function handleAddToFavoritesResponse(xhr, button) {
        if (xhr.status === 200) {
            var response = JSON.parse(xhr.responseText);
            
            var toast = document.getElementById("md-toast");
            var toastMessage = document.getElementById("md-toast-message");
            
            toastMessage.innerHTML = response.data;
            toast.className = "md-toast show";
            
            setTimeout(function() {
                toast.className = toast.className.replace("show", "");
            }, 3000);

            if (response.success) {
                button.setAttribute('type', 'solid');
                button.setAttribute('color', '#39bb35');
            } else {
                button.setAttribute('type', 'regular');
                button.setAttribute('color', '#123456');
            }
        } else {
            alert('Errore durante l\'aggiunta ai preferiti.');
        }
    }

    /** AUTOCOMPLETE */

    const searchBox = document.getElementById('searchbox');

    if(searchBox){
        const dropdownMenu = document.getElementById('dropdown-menu');
        const searchBoxContainer = document.getElementById('searchbox-container');
    
        searchBox.addEventListener("keyup", function(event) { 
    
            const timer = setTimeout(function () { 
                var sr = event.target.value;
                if(!sr) return;
                searchBoxContainer.classList.add("control", "is-loading");
    
                const request = new Request('/wp-json/wp-market-domain/v1/domain/'+sr);
                fetch(request)
                    .then((response) => response.json())
                    .then((data) => {
                        if (searchBox.value && data.success) {
                            dropdownMenu.replaceChildren(searchResult(data.data));
                        }else{
                            clearDropdown();
                        }
                        searchBoxContainer.classList.remove("is-loading");  
                    });
    
            }, 500);
        });
    
        function searchResult(result){
            const ul = document.createElement('ul')
            ul.classList.add('box', 'mt-1' );
            if(result.length){
                result.forEach((domain) => {
                    if(!domain) return;
                    ul.appendChild(createListItem(domain));
                })
            }
            return ul;
        }
    
        function createListItem(domain){
    
            const li = document.createElement('li') 
            li.classList.add('py-1');
            li.innerText = domain.title;
    
            const selectEvent = function(event){
                event.stopPropagation();
                const li = event.target
                clearDropdown();
                window.location.href = domain.link;
                searchBox.value = domain.title;
            };
    
            li.addEventListener('click', selectEvent)
            li.addEventListener('touchstart', selectEvent)
    
            return li
        }
    
        function clearDropdown(){
            dropdownMenu.innerHTML = '';
            searchBoxContainer.classList.remove("is-loading");
        }
    
        setInterval(function() {
            if (!searchBox.value) {
                clearDropdown()
            }
        }, 500);
    }

    /** SHOW ROW MOBILE */
    document.querySelectorAll('.show_domain_details').forEach(function(element) {
        element.addEventListener('click', function() {
            var detailsRow = this.closest('tr').nextElementSibling;
            var icon = this.querySelector('box-icon');
            if (detailsRow.style.display === 'none' || detailsRow.style.display === '') {
                detailsRow.style.display = 'table-row';
                icon.setAttribute('name', 'minus-square');
            } else {
                detailsRow.style.display = 'none';
                icon.setAttribute('name', 'plus-square');
            }
        });
    });
    
});