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);
});