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