import app from \"./app.js\";
import store from \"./store.js\";
var $ = Dom7;

var trendingEventsStore = store.getters.getTrendingEvents;
var trendingVenuesStore = store.getters.getTrendingVenues;
var eventCategories = store.getters.getEventCategories;
var filteredEventsStore = store.getters.getFilteredEvents;
var filteredVenuesStore = store.getters.getFilteredVenues;
var trendingUsersStore = store.getters.getTrendingUsers;

var isFetchingPosts = false
var currentEventsPage = 1
var currentVenuesPage = 1
var currentUsersPage = 1
var refreshed = false

var totalEventPages = 1
var totalVenuesPages = 1
var totalUsersPages = 1

var autocomplete;
var filters = {};

//AUTOCOMPLETE FUNCTIONS
function initAutocomplete() {
    autocomplete = new google.maps.places.Autocomplete(
        document.getElementById(\"autocomplete\"), {
            types: [\"establishment\", \"geocode\"],
            componentRestrictions: {
                country: \\\'GB\\\'
            }
        }
    );
    autocomplete.setFields([\"geometry\", \"address_component\"]);
    autocomplete.addListener(\"place_changed\", fillInAddress);
}

function fillInAddress() {
    const place = autocomplete.getPlace();

    console.log(place);

    document.getElementById(\\\'lat\\\').value = place.geometry.location.lat();
    document.getElementById(\\\'lng\\\').value = place.geometry.location.lng();
}

function populateEventCard(data = [], isSwiper = true) {
    const swiperContainer = document.querySelector(\\\'#trending-events\\\');
    if (isSwiper) swiperContainer.innerHTML = \\\'\\\';

    const eventsTabContainer = document.querySelector(\\\'#filtered-events-tab\\\');

    if (refreshed) {
        eventsTabContainer.innerHTML = \\\'\\\';
    }

    data.forEach(event => {
        const startDate = new Date(event.start_date);
        const endDate = new Date(event.end_date);
        // const startDate = new Date(event.dates[0].start_date);
        // const endDate = new Date(event.dates[0].end_date);

        let endDateString = \\\'\\\';

        if (startDate.getDate() !== endDate.getDate()) {
            endDateString = `
            <div class=\"event-date-item\">
                <p>${endDate.toLocaleString(\\\'default\\\', { month: \\\'short\\\' })}</p>
                <h5>${endDate.getDate()}</h5>
            </div>
            `
        }

        const card = `
        <a href=\"/discover-view-event/${event.id}\">
            <div class=\"card event-item\">
                <div class=\"event-image position-relative\">
                    <div class=\"image-rectangle\" style=\"background-image: url(\\\'${event.thumbnail}\\\');\"></div>
                    <div class=\"event-dates\">
                        <div class=\"event-date-item\">
                            <p>${startDate.toLocaleString(\\\'default\\\', { month: \\\'short\\\' })}</p>
                            <h5>${startDate.getDate()}</h5>
                        </div>
                        ${endDateString}
                    </div>
                </div>
                <div class=\"card-content\">
                    <h3 class=\"event-title\">${event.title}</h3>
                    <p class=\"event-info\">Starts ${startDate.toLocaleString(\\\'default\\\', { weekday: \\\'short\\\' })}, ${startDate.getDate()} ${startDate.toLocaleString(\\\'default\\\', { month: \\\'short\\\' })} ${startDate.getFullYear()}</p>
                    <div class=\"event-info\">
                        ${event.location}
                    </div>
                </div>
            </div>
        </a>
        `;

        if (isSwiper) {
            const swiperSlide = document.createElement(\\\'swiper-slide\\\');
            swiperSlide.innerHTML = card;
            swiperContainer.appendChild(swiperSlide);
        }

        eventsTabContainer.innerHTML += card;
    });
}

function populateVenueCard(data = [], isSwiper = true) {
    const swiperContainer = document.querySelector(\\\'#trending-venues\\\');

    if (isSwiper) swiperContainer.innerHTML = \\\'\\\';

    const eventsTabContainer = document.querySelector(\\\'#filtered-venues-tab\\\');

    data.forEach(event => {
        const swiperSlide = document.createElement(\\\'swiper-slide\\\');

        const card = `
        <a href=\"/discover-view-venue/${event.ID}\">
            <div class=\"card event-item\">
                <div class=\"event-image position-relative\">
                    <div class=\"image-rectangle\" style=\"background-image: url(\\\'${event.cover_image}\\\');\"></div>
                </div>
                <div class=\"card-content\">
                    <h3 class=\"event-title\">${event.title}</h3>
                    <div class=\"event-info\">
                        ${event.venue_location}
                    </div>
                    <div class=\"event-info\">
                        Apprx. ${event.distance} miles away
                    </div>
                </div>
            </div>
        </a>
        `;

        if (isSwiper) {
            swiperSlide.innerHTML = card;
            swiperContainer.appendChild(swiperSlide);
        }

        eventsTabContainer.innerHTML += card;
    });


}

function populateUsersCard(data = []) {
    const tabContainer = document.querySelector(\\\'#users-vehicles-tab\\\');

    data.forEach(user => {
        let linkTo = user.type === \\\'user\\\' ? `/profile-view/${user.id}` : `/profile-garage-vehicle-view/${user.id}`;
        let title;

        if (user.type === \\\'user\\\') {
            title = user.name;
        }

        if (user.type === \\\'vehicle\\\') {
            const userName = user.owner.username;
            const vehicleName = user.title;

            title = `${vehicleName} <br/> Owner ${userName}`;
        }


        const card = `
        <li>
            <a class=\"item-link search-result item-content\" href=\"${linkTo}\">
                <div class=\"item-media\">
                    <div class=\"image-square image-rounded\"
                        style=\"background-image:url(\\\'${user.thumbnail}\\\')\">
                    </div>
                </div>
                <div class=\"item-inner\">
                    <div class=\"item-title\">${title}</div>
                </div>
            </a>
        </li>
        `;
        tabContainer.innerHTML += card;
    });
}

function addCategoryOptions(categories) {
    const categoryFilters = document.querySelector(\\\'#category-filters ul\\\');

    categories.forEach(category => {
        const listItem = document.createElement(\\\'li\\\');

        listItem.innerHTML = `
            <label class=\"item-checkbox item-content\">
                <input type=\"checkbox\" name=\"${category.slug}\" value=\"${category.id}\" />
                <i class=\"icon icon-checkbox\"></i>
                <div class=\"item-inner\">
                    <div class=\"item-title\">${category.name}</div>
                </div>
            </label>
        `;

        categoryFilters.appendChild(listItem);
    });
}

// Event listener for the submit button
$(document).on(\\\'click\\\', \\\'.apply-filters\\\', function (e) {
    const dateFilters = document.querySelector(\\\'#date-filters ul\\\');
    const locationFilters = document.querySelector(\\\'#location-filters ul\\\');
    const categoryFilters = document.querySelector(\\\'#category-filters ul\\\');

    e.preventDefault(); // Prevent form submission if you\\\'re handling it via JavaScript
    const selectedCats = [...categoryFilters.querySelectorAll(\\\'input[type=\"checkbox\"]:checked\\\')].map(cb => cb.value);
    const selectedLocation = [...locationFilters.querySelectorAll(\\\'input[type=\"radio\"]:checked\\\')].map(cb => cb.value);
    const dateFilter = [...dateFilters.querySelectorAll(\\\'input[type=\"checkbox\"]:checked\\\')].map(cb => cb.value);

    filters = {
        \\\'event_location\\\': selectedLocation,
        //  \\\'custom_location\\\': location,
        \\\'event_date\\\': dateFilter,
        //  \\\'event_start\\\': customDateRange?.start,
        //  \\\'event_end\\\': customDateRange?.end,
        \\\'event_category\\\': !selectedCats?.includes(0) ? selectedCats : undefined,
    };

    // get active tab
    const activeTab = document.querySelector(\\\'.tabbar-nav .tab-link-active\\\').getAttribute(\\\'data-id\\\');

    if (activeTab === \\\'events\\\') {
        store.dispatch(\\\'filterEvents\\\', {
            page: 1,
            filters
        })

        currentEventsPage = 1
        isFetchingPosts = false

        const eventsTabContainer = document.querySelector(\\\'#filtered-events-tab\\\');
        eventsTabContainer.innerHTML = \\\'\\\';
    }

    if (activeTab === \\\'venues\\\') {
        store.dispatch(\\\'filterVenues\\\', {
            page: 1,
            filters
        })

        currentVenuesPage = 1
        isFetchingPosts = false

        const venuesTabContainer = document.querySelector(\\\'#filtered-venues-tab\\\');
        venuesTabContainer.innerHTML = \\\'\\\';
    }

    // close popup
    app.popup.close()
});

$(document).on(\\\'change\\\', \\\'#category-filters ul\\\', function (e) {
    const categoryFilters = document.querySelector(\\\'#category-filters ul\\\');
    var allCheckbox = categoryFilters.querySelector(\\\'input[name=\"all\"]\\\');

    const targetCheckbox = e.target;

    if (targetCheckbox.name !== \"all\") {
        // If any other checkbox is selected, uncheck \"All\"
        if (targetCheckbox.checked) {
            allCheckbox.checked = false;
        } else {
            // If all other checkboxes are unchecked, check \"All\"
            const allUnchecked = [...categoryFilters.querySelectorAll(\\\'input[type=\"checkbox\"]\\\')]
                .filter(cb => cb.name !== \"all\")
                .every(cb => !cb.checked);

            if (allUnchecked) {
                allCheckbox.checked = true;
            }
        }
    } else {
        // If \"All\" is selected, uncheck all other checkboxes
        if (targetCheckbox.checked) {
            [...categoryFilters.querySelectorAll(\\\'input[type=\"checkbox\"]\\\')]
            .filter(cb => cb.name !== \"all\")
                .forEach(cb => cb.checked = false);
        }
    }
});

eventCategories.onUpdated((data) => {
    addCategoryOptions(data);
})

trendingVenuesStore.onUpdated((data) => {
    totalVenuesPages = data.total_pages

    populateVenueCard(data.data);
});

trendingEventsStore.onUpdated((data) => {
    totalEventPages = data.total_pages

    populateEventCard(data.data);
});

trendingUsersStore.onUpdated((data) => {
    const tabContainer = document.querySelector(\\\'#users-vehicles-tab\\\');
    if (!data || data.data.length === 0) {
        tabContainer.innerHTML = `
            <div class=\"no-events\">
                <h3>No trending users found for you</h3>
            </div>
        `;
        return
    }

    totalUsersPages = data.total_pages

    if ((totalUsersPages == data.page) || (totalUsersPages == 0) || (data.new_data.length < 10)) {
        $(\\\'.infinite-scroll-preloader.users-tab\\\').hide()
    } else {
        $(\\\'.infinite-scroll-preloader.users-tab\\\').show()
    }

    populateUsersCard(data.new_data);
});

// Filtered views
filteredEventsStore.onUpdated((data) => {
    const eventsTabContainer = document.querySelector(\\\'#filtered-events-tab\\\');
    if (!data || data.data.length === 0) {
        eventsTabContainer.innerHTML = `
            <div class=\"no-events\">
                <h3>No events found</h3>
            </div>
        `;
        return
    }

    totalEventPages = data.total_pages

    if ((totalEventPages == data.page) || (totalEventPages == 0) || (data.new_data.length < 10)) {
        $(\\\'.infinite-scroll-preloader.events-tab\\\').hide()
    } else {
        $(\\\'.infinite-scroll-preloader.events-tab\\\').show()
    }

    populateEventCard(data.new_data, false);
});

filteredVenuesStore.onUpdated((data) => {
    const tabContainer = document.querySelector(\\\'#filtered-venues-tab\\\');

    if (!data || data.data.length === 0) {
        tabContainer.innerHTML = `
            <div class=\"no-venues\">
                <h3>No venues found</h3>
            </div>
        `;

        totalVenuesPages = 0
        return
    }

    if ((totalVenuesPages == data.page) || (totalVenuesPages == 0) || (data.new_data.length == 0)) {
        $(\\\'.infinite-scroll-preloader.venues-tab\\\').hide()
        totalVenuesPages = 0
    } else {
        $(\\\'.infinite-scroll-preloader.venues-tab\\\').show()
        totalVenuesPages = data.total_pages
        populateVenueCard(data.new_data, false);
    }
});

$(document).on(\\\'page:init\\\', \\\'.page[data-name=\"discover\"]\\\', function (e) {
    //Date Filters
    app.calendar.create({
        inputEl: \\\'#date-from\\\',
        openIn: \\\'customModal\\\',
        header: true,
        footer: true,
    });

    app.calendar.create({
        inputEl: \\\'#date-to\\\',
        openIn: \\\'customModal\\\',
        header: true,
        footer: true,
    });

    //Filter Date Popup
    app.popup.create({
        el: \\\'.filter-bydate-popup\\\',
        swipeToClose: \\\'to-bottom\\\'
    });

    //Filter Category Popup
    app.popup.create({
        el: \\\'.filter-bycategory-popup\\\',
        swipeToClose: \\\'to-bottom\\\'
    });

    //Filter Location Popup
    app.popup.create({
        el: \\\'.filter-bylocation-popup\\\',
        swipeToClose: \\\'to-bottom\\\'
    });

    //SEARCH BAR
    $(\\\'.discover-search\\\').on(\\\'mousedown\\\', function (event) {
        event.preventDefault();
        app.views.discover.router.navigate(\\\'/search/\\\');
    });

    const dateFilters = document.querySelector(\\\'#date-filters ul\\\');
    const locationFilters = document.querySelector(\\\'#location-filters ul\\\');

    // Event listener for checkbox selection
    dateFilters.addEventListener(\\\'change\\\', function (e) {
        const targetCheckbox = e.target;

        // Uncheck all checkboxes except the one that was clicked
        if (targetCheckbox.type === \"checkbox\") {
            [...dateFilters.querySelectorAll(\\\'input[type=\"checkbox\"]\\\')].forEach(checkbox => {
                if (checkbox !== targetCheckbox) {
                    checkbox.checked = false;
                }
            });
        }
    });

    locationFilters.addEventListener(\\\'change\\\', function (e) {
        const targetCheckbox = e.target;

        // Uncheck all checkboxes except the one that was clicked
        if (targetCheckbox.type === \"checkbox\") {
            [...locationFilters.querySelectorAll(\\\'input[type=\"checkbox\"]\\\')].forEach(checkbox => {
                if (checkbox !== targetCheckbox) {
                    checkbox.checked = false;
                }
            });
        }
    });

    initAutocomplete();
});

$(document).on(\\\'infinite\\\', \\\'.discover-page.infinite-scroll-content\\\', async function (e) {
    if (isFetchingPosts) return

    // get active tab
    const activeTabId = $(\\\'.tabbar-nav .tab-link-active\\\').attr(\\\'data-id\\\');

    if (!activeTabId) return

    isFetchingPosts = true

    if (activeTabId == \\\'events\\\') {
        currentEventsPage++

        if (currentEventsPage <= totalEventPages) {
            await store.dispatch(\\\'filterEvents\\\', {
                page: currentEventsPage,
                filters
            })
            isFetchingPosts = false
        }
    } else if (activeTabId == \\\'venues\\\') {
        currentVenuesPage++

        if (currentVenuesPage <= totalVenuesPages) {
            await store.dispatch(\\\'filterVenues\\\', {
                page: currentVenuesPage,
                filters
            })
            isFetchingPosts = false
        }
    } else {
        isFetchingPosts = false
    }
})

// $(document).on(\\\'page:beforein\\\', \\\'.page[data-name=\"discover\"]\\\', function (e) {
// const eventCats = eventCategories.value
// const trendingEvents = trendingEventsStore.value
// const trendingVenues = trendingVenuesStore.value
// const trendingUsers = trendingUsersStore.value

// if (!eventCats || eventCats.length === 0) {
//     store.dispatch(\\\'fetchEventCategories\\\')
// } else {
//     addCategoryOptions(eventCats);
// }

// if (!trendingEvents || trendingEvents.length === 0) {
//     store.dispatch(\\\'fetchTrendingEvents\\\')
// } else {
//     totalEventPages = trendingEvents.total_pages
//     populateEventCard(trendingEvents.data);
// }

// if (!trendingVenues || trendingVenues.length === 0) {
//     store.dispatch(\\\'fetchTrendingVenues\\\')
// } else {
//     totalVenuesPages = trendingVenues.total_pages
//     populateVenueCard(trendingVenues.data);
// }

// if (!trendingUsers || trendingUsers.length === 0) {
//     store.dispatch(\\\'fetchTrendingUsers\\\')
// } else {
//     totalUsersPages = trendingUsers.total_pages
//     populateUsersCard(trendingUsers.data);
// }
// });

$(document).on(\\\'page:init\\\', \\\'.page[data-name=\"discover-view-event\"]\\\', function (e) {
    // Init slider
    new Swiper(\\\'.swiper-container\\\', {
        pagination: {
            el: \\\'.swiper-pagination\\\',
            clickable: true,
        },
    })

    app.popup.create({
        el: \\\'.share-listing-popup\\\',
        swipeToClose: \\\'to-bottom\\\'
    });
});

$(document).on(\\\'ptr:refresh\\\', \\\'.discover-page.ptr-content\\\', async function (e) {
    refreshed = true
    currentEventsPage = 1
    currentVenuesPage = 1

    try {
        await store.dispatch(\\\'getTrendingEvents\\\')
        await store.dispatch(\\\'getTrendingVenues\\\')
        await store.dispatch(\\\'filterTrendingUsers\\\')
        await store.dispatch(\\\'fetchEventCategories\\\')
    } catch (error) {
        console.log(error);
    }

    refreshed = false
    app.ptr.get(\\\'.discover-page.ptr-content\\\').done()
})

$(document).on(\\\'click\\\', \\\'#featured-event-link\\\', function (e) {
    e.preventDefault();
    window.open(e.target.href, \\\'_blank\\\');
});