{layout='layouts/_html-wrapper'}
{partial_search_functions}

<div class="container my-12 mx-auto px-4 md:px-12 w-10 inline-block align-top">
    <div id="addon-results" class="flex flex-wrap -mx-1 lg:-mx-4">

    </div>
</div>

<script>
    //we're going to need the baseURL for several things here
    function baseUrl() {
        return location.protocol + '//' + location.hostname + (location.port ? ':' + location.port: '');
    }
    const resultsTarget = document.getElementById("addon-results");
    const rp = baseUrl() + '/ajax/addon-results'
    
    //on load create AJAX request
    document.addEventListener('DOMContentLoaded', event =>{
        
        //submit the response with fetch()
        fetch(baseUrl() + "/ajax/addon-results")
            // take our response and get the HTML we really want
            .then(response => {
                return response.text();
                })
            // take our HTML and replace the contents of our #addon-results element
            .then(data => {
                resultsTarget.innerHTML = data;
                paginationLinks();
                addClicktoFavoritesToggle();
            });
        showFavoriteResults();
    });

    function ajaxFormSubmit () {
        //get the form data
        var searchForm = document.getElementById("addon_filter");
        var formData = new FormData(searchForm);

        //submit the data via AJAX
        fetch(searchForm.action, {
            method: 'post',
            body: formData
        })
        // take our response and get the HTML we really want
        .then(response => {
            return response.text();
        })
        // take our HTML and replace the contents of our #addon-results element
        .then(data =>{
            resultsTarget.innerHTML = data;
            paginationLinks();
            addClicktoFavoritesToggle();
        })
    }

    //paginationLinks
        //adds event listners to pagination
        //must be called AFTER ajax loads
        function paginationLinks() {
            document.querySelectorAll('.pagination__page').forEach(pageLink => {
                pageLink.addEventListener('click', (event) => {
                    event.preventDefault();
                    var pageUrl = pageLink.href;
                    fetch(pageUrl)
                        .then(response => {
                            return response.text();
                        })
                        .then(data => {
                            resultsTarget.innerHTML = data;
                            paginationLinks();
                            addClicktoFavoritesToggle();
                        });


                })
            });
        }

    //addClicktoFavoritesToggle
    //toggles favorited items
    //must be called AFTER ajax calls are complete.
    function addClicktoFavoritesToggle() {
        favoriteToggles = document.querySelectorAll('.addon-card form');

        favoriteToggles.forEach(favToggle => {
            favToggle.addEventListener('submit', event => {
                
                //stop the user from being directed to the add-on page
                event.preventDefault();

                var favHeart = favToggle.querySelector('.favorite-toggle');

                //make the ajax request to favorite the entry
                var formData = new FormData(favToggle);
                fetch(favToggle.action, {
                    method: 'post',
                    body: formData
                })
                .then(response => {
                    return response.text();
                    })
                .then(data => {
                
                    favHeart.classList.remove('fas');
                    favHeart.classList.remove('far');

                    //if the heart is already active then switch back to the outline only (regular) style. 
                    if (favHeart.classList.contains('active')) {
                        favHeart.classList.remove('active');
                        favHeart.classList.add('far');
                    }else{
                        favHeart.classList.add('active');
                        favHeart.classList.add('fas');
                    }
                        var entry = favToggle.querySelector('input[name="entry-id"]').value;
                        fetch('/ajax/addon-favorites-form/'+entry)
                            .then (response => {
                                return response.text();
                            })
                            .then (data => {
                                var formPositionSibling = favToggle.previousElementSibling;
                                formPositionSibling.parentNode.removeChild(favToggle);
                                formPositionSibling.insertAdjacentHTML('afterend',data);
                                addClicktoFavoritesToggle();
                            });
                    });
            });
        });
    }

    function showFavoriteResults() {
				//get results for users favorites
        document.getElementById("see-all-favorites").addEventListener('click', event => {
            //stop the user from being redirected
            event.preventDefault();
            fetch(document.getElementById("see-all-favorites").href)
            .then(response =>{
                return response.text();
            })
            .then(data => {
                resultsTarget.innerHTML = data;
                paginationLinks();
                addClicktoFavoritesToggle();
            });
        });
    }

</script>