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