import {
    getDiscoverData
} from \\\\\\\"./api/discover.js\\\\\\\";
import store from \\\\\\\"./store.js\\\\\\\";

var $ = Dom7;

// let activeTab = \\\\\\\\\\\\\\\'all\\\\\\\\\\\\\\\';
let lastSearchText = \\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\';
let controller; // To store the current AbortController

var searchResultsStore = store.getters.getSearchResults;

$(document).on(\\\\\\\\\\\\\\\'page:afterin\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\'.page[data-name=\\\\\\\"search\\\\\\\"]\\\\\\\\\\\\\\\', async function (e) {
    $(\\\\\\\\\\\\\\\'#discover-search\\\\\\\\\\\\\\\').focus();
})

// event listener for tab change
$(document).on(\\\\\\\\\\\\\\\'click\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\'.discovery-wrap .tab-link\\\\\\\\\\\\\\\', async function (e) {
    const type = this.getAttribute(\\\\\\\\\\\\\\\'data-type\\\\\\\\\\\\\\\')
    activeTab = type
})

function debounce(func, delay) {
    let timer;
    return function (...args) {
        clearTimeout(timer);
        timer = setTimeout(() => func.apply(this, args), delay);
    };
}

function addLoaderToTabs() {
    const eventsContainer = document.querySelector(\\\\\\\\\\\\\\\'#events-results .list ul\\\\\\\\\\\\\\\');
    const usersContainer = document.querySelector(\\\\\\\\\\\\\\\'#users_vehicles-results .list ul\\\\\\\\\\\\\\\');
    const venuesContainer = document.querySelector(\\\\\\\\\\\\\\\'#venues-results .list ul\\\\\\\\\\\\\\\');
    const topContainer = document.querySelector(\\\\\\\\\\\\\\\'#top-results .list\\\\\\\\\\\\\\\');

    const loader = `
    <div style=\\\\\\\"padding-block: .5rem;\\\\\\\">
        <div class=\\\\\\\"infinite-scroll-preloader\\\\\\\">
            <div class=\\\\\\\"preloader\\\\\\\"></div>
        </div>
    </div>`;

    eventsContainer.innerHTML = loader;
    usersContainer.innerHTML = loader;
    venuesContainer.innerHTML = loader;
    topContainer.innerHTML = loader;
}

const debouncedSearch = debounce(async function () {
    const search = $(this).val().trim();

    if (search.length < 3 || search === lastSearchText) {
        return;
    }

    lastSearchText = search;

    // Abort the previous request if it\\\\\\\\\\\\\\\'s still ongoing
    if (controller) {
        controller.abort();
    }

    // Create a new AbortController for the current request
    controller = new AbortController();
    const signal = controller.signal;

    addLoaderToTabs();
    try {
        const searchResults = await getDiscoverData(search, \\\\\\\\\\\\\\\'all\\\\\\\\\\\\\\\', 1, signal);
        store.dispatch(\\\\\\\\\\\\\\\'setSearchResults\\\\\\\\\\\\\\\', searchResults);
    } catch (error) {
        if (error.name === \\\\\\\\\\\\\\\'AbortError\\\\\\\\\\\\\\\') {
            console.log(\\\\\\\\\\\\\\\'Fetch aborted\\\\\\\\\\\\\\\');
        } else {
            console.error(\\\\\\\\\\\\\\\'Error fetching search results:\\\\\\\\\\\\\\\', error);
        }
    }
}, 300); // Adjust the delay (in milliseconds) as needed

$(document).on(\\\\\\\\\\\\\\\'change input paste\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\'#discover-search\\\\\\\\\\\\\\\', debouncedSearch);

// Function to render a list of items in the DOM
function renderList(container, items, renderItem) {
    container.innerHTML = \\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\';

    const noResultsMessage = \\\\\\\\\\\\\\\'<li><strong>No results found</strong></li>\\\\\\\\\\\\\\\';

    if (!items || items.length === 0) {
        container.innerHTML = noResultsMessage;
        return;
    }

    // Render each item
    items.forEach(item => {
        const li = document.createElement(\\\\\\\\\\\\\\\'li\\\\\\\\\\\\\\\');
        li.innerHTML = renderItem(item);
        container.appendChild(li);
    });
}

// Function to render the search results
function renderSearchResults(searchResults) {
    const eventsContainer = document.querySelector(\\\\\\\\\\\\\\\'#events-results .list ul\\\\\\\\\\\\\\\');
    const usersContainer = document.querySelector(\\\\\\\\\\\\\\\'#users_vehicles-results .list ul\\\\\\\\\\\\\\\');
    const venuesContainer = document.querySelector(\\\\\\\\\\\\\\\'#venues-results .list ul\\\\\\\\\\\\\\\');
    const topContainer = document.querySelector(\\\\\\\\\\\\\\\'#top-results .list\\\\\\\\\\\\\\\');

    // Ensure containers are cleared before rendering
    eventsContainer.innerHTML = \\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\';
    usersContainer.innerHTML = \\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\';
    venuesContainer.innerHTML = \\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\';
    topContainer.innerHTML = \\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\';

    // Render events
    if (searchResults.events) {
        renderList(eventsContainer, searchResults.events.data, event => `
            <a class=\\\\\\\"item-link search-result item-content\\\\\\\" href=\\\\\\\"/discover-view-event/${event.id}\\\\\\\">
                <div class=\\\\\\\"item-media\\\\\\\">
                    <div class=\\\\\\\"image-square image-rounded\\\\\\\" style=\\\\\\\"background-image:url(\\\\\\\\\\\\\\\'${event.thumbnail}\\\\\\\\\\\\\\\')\\\\\\\"></div>
                </div>
                <div class=\\\\\\\"item-inner\\\\\\\">
                    <div class=\\\\\\\"item-title\\\\\\\">${event.name}</div>
                </div>
            </a>
        `);
    }

    // Render users
    if (searchResults.users) {
        renderList(usersContainer, searchResults.users.data, (user) => {
            const userLink = user.type == \\\\\\\\\\\\\\\'user\\\\\\\\\\\\\\\' ? \\\\\\\\\\\\\\\'/profile-view/\\\\\\\\\\\\\\\' + user.id : \\\\\\\\\\\\\\\'/profile-garage-vehicle-view/\\\\\\\\\\\\\\\' + user.id;
            let contentText;

            if (user.type == \\\\\\\\\\\\\\\'user\\\\\\\\\\\\\\\') {
                contentText = `${user.name} (${user.username})`;
            }

            if (user.type == \\\\\\\\\\\\\\\'vehicle\\\\\\\\\\\\\\\') {
                contentText = `${user.name}\\\\\\\\\\\\\\\'s <b>${user.meta.make} ${user.meta.model}</b>`;
            }

            return `
                <a class=\\\\\\\"item-link search-result item-content\\\\\\\" href=\\\\\\\"${userLink}\\\\\\\">
                    <div class=\\\\\\\"item-media\\\\\\\">
                        <div class=\\\\\\\"image-square image-rounded\\\\\\\" style=\\\\\\\"background-image:url(\\\\\\\\\\\\\\\'${user.thumbnail || \\\\\\\\\\\\\\\'assets/img/profile-placeholder.jpg\\\\\\\\\\\\\\\'}\\\\\\\\\\\\\\\')\\\\\\\"></div>
                    </div>
                    <div class=\\\\\\\"item-inner\\\\\\\">
                        <div class=\\\\\\\"item-title\\\\\\\">${contentText}</div>
                    </div>
                </a>`
        });
    }

    // Render venues
    if (searchResults.venues) {
        renderList(venuesContainer, searchResults.venues.data, venue => `
            <a class=\\\\\\\"item-link search-result item-content\\\\\\\" href=\\\\\\\"/discover-view-venue/${venue.id}\\\\\\\">
                <div class=\\\\\\\"item-media\\\\\\\">
                    <div class=\\\\\\\"image-square image-rounded\\\\\\\" style=\\\\\\\"background-image:url(\\\\\\\\\\\\\\\'${venue.thumbnail}\\\\\\\\\\\\\\\')\\\\\\\"></div>
                </div>
                <div class=\\\\\\\"item-inner\\\\\\\">
                    <div class=\\\\\\\"item-title\\\\\\\">${venue.name} - ${venue.venue_location}</div>
                </div>
            </a>
        `);
    }

    // Render top results
    let hasTopResults = false;

    if (searchResults.top_results) {
        if (searchResults.top_results.events && searchResults.top_results.events.length > 0) {
            hasTopResults = true;
            const eventSubList = document.createElement(\\\\\\\\\\\\\\\'ul\\\\\\\\\\\\\\\');
            const heading = document.createElement(\\\\\\\\\\\\\\\'h2\\\\\\\\\\\\\\\');

            heading.innerHTML = \\\\\\\\\\\\\\\'Trending Events\\\\\\\\\\\\\\\';
            heading.classList.add(\\\\\\\\\\\\\\\'section-title\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\'mt-3\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\'mb-2\\\\\\\\\\\\\\\');
            topContainer.appendChild(heading);
            topContainer.appendChild(eventSubList);

            renderList(eventSubList, searchResults.top_results.events, event => `
                <a class=\\\\\\\"item-link search-result item-content\\\\\\\" href=\\\\\\\"/discover-view-event/${event.id}\\\\\\\">
                    <div class=\\\\\\\"item-media\\\\\\\">
                        <div class=\\\\\\\"image-square image-rounded\\\\\\\" style=\\\\\\\"background-image:url(\\\\\\\\\\\\\\\'${event.thumbnail}\\\\\\\\\\\\\\\')\\\\\\\"></div>
                    </div>
                    <div class=\\\\\\\"item-inner\\\\\\\">
                        <div class=\\\\\\\"item-title\\\\\\\">${event.name}</div>
                    </div>
                </a>
            `);
        }

        if (searchResults.top_results.users && searchResults.top_results.users.length > 0) {
            hasTopResults = true;

            const userSubList = document.createElement(\\\\\\\\\\\\\\\'ul\\\\\\\\\\\\\\\');
            const heading = document.createElement(\\\\\\\\\\\\\\\'h2\\\\\\\\\\\\\\\');

            heading.innerHTML = \\\\\\\\\\\\\\\'Trending Users\\\\\\\\\\\\\\\';
            heading.classList.add(\\\\\\\\\\\\\\\'section-title\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\'mt-3\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\'mb-2\\\\\\\\\\\\\\\');
            topContainer.appendChild(heading);
            topContainer.appendChild(userSubList);

            renderList(userSubList, searchResults.top_results.users, (user) => {
                const userLink = user.type == \\\\\\\\\\\\\\\'user\\\\\\\\\\\\\\\' ? \\\\\\\\\\\\\\\'/profile-view/\\\\\\\\\\\\\\\' + user.id : \\\\\\\\\\\\\\\'/profile-garage-vehicle-view/\\\\\\\\\\\\\\\' + user.id;
                let contentText;

                if (user.type == \\\\\\\\\\\\\\\'user\\\\\\\\\\\\\\\') {
                    contentText = `${user.name} (${user.username})`;
                }

                if (user.type == \\\\\\\\\\\\\\\'vehicle\\\\\\\\\\\\\\\') {
                    contentText = `${user.name}\\\\\\\\\\\\\\\'s <b>${user.meta.make} ${user.meta.model}</b>`;
                }

                return `
                <a class=\\\\\\\"item-link search-result item-content\\\\\\\" href=\\\\\\\"${userLink}\\\\\\\">
                    <div class=\\\\\\\"item-media\\\\\\\">
                        <div class=\\\\\\\"image-square image-rounded\\\\\\\" style=\\\\\\\"background-image:url(\\\\\\\\\\\\\\\'${user.thumbnail || \\\\\\\\\\\\\\\'assets/img/profile-placeholder.jpg\\\\\\\\\\\\\\\'}\\\\\\\\\\\\\\\')\\\\\\\"></div>
                    </div>
                    <div class=\\\\\\\"item-inner\\\\\\\">
                        <div class=\\\\\\\"item-title\\\\\\\">${contentText}</div>
                    </div>
                </a>`
            });
        }

        if (searchResults.top_results.venues && searchResults.top_results.venues.length > 0) {
            hasTopResults = true;

            const venueSubList = document.createElement(\\\\\\\\\\\\\\\'ul\\\\\\\\\\\\\\\');
            const heading = document.createElement(\\\\\\\\\\\\\\\'h2\\\\\\\\\\\\\\\');

            heading.innerHTML = \\\\\\\\\\\\\\\'Trending Venues\\\\\\\\\\\\\\\';
            heading.classList.add(\\\\\\\\\\\\\\\'section-title\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\'mt-3\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\'mb-2\\\\\\\\\\\\\\\');

            topContainer.appendChild(heading);
            topContainer.appendChild(venueSubList);

            renderList(venueSubList, searchResults.top_results.venues, venue => `
                <a class=\\\\\\\"item-link search-result item-content\\\\\\\" href=\\\\\\\"/discover-view-venue/${venue.id}\\\\\\\">
                    <div class=\\\\\\\"item-media\\\\\\\">
                        <div class=\\\\\\\"image-square image-rounded\\\\\\\" style=\\\\\\\"background-image:url(\\\\\\\\\\\\\\\'${venue.thumbnail}\\\\\\\\\\\\\\\')\\\\\\\"></div>
                    </div>
                    <div class=\\\\\\\"item-inner\\\\\\\">
                        <div class=\\\\\\\"item-title\\\\\\\">${venue.name} - ${venue.venue_location}</div>
                    </div>
                </a>
            `);
        }
    }

    if (!hasTopResults) {
        topContainer.innerHTML = \\\\\\\\\\\\\\\'<div><strong>No top results found</strong></div>\\\\\\\\\\\\\\\';
    }
}

searchResultsStore.onUpdated((results) => {
    renderSearchResults(results);
});