import {
    fetchEvent,
    maybeFavoriteEvent
} from "./api/discover.js";
import app from "./app.js";

var $ = Dom7;

//DISCOVER - VIEW EVENT
$(document).on('page:afterin', '.page[data-name="discover-view-event"]', async function (e) {

    var eventId = e.detail.route.params.id

    if (!eventId || eventId === '-1') {
        return;
    }


    $('.loading-fullscreen').show()

    const eventData = await fetchEvent(eventId)
    $('.loading-fullscreen').hide()

    const mainContainer = $('.discover-view-event.view-event');

    if (!eventData) {
        mainContainer.html('<div class="text-align-center">No event found</div>');
        return;
    }

    // Populating the Event Title
    mainContainer.find('.event-detail-title').text(eventData.title);

    // Populating the Event Date
    const dateText = `Sun, Aug 25th 2024`; // You can format this dynamically if needed
    mainContainer.find('.event-time-address:nth-child(1) span').text(dateText);

    // Populating the Event Time
    const timeText = `${eventData.dates[0].start_time} - ${eventData.dates[0].end_time}`;
    mainContainer.find('.event-time-address:nth-child(2) span').text(timeText);

    // Populating the Event Location
    mainContainer.find('.event-time-address:nth-child(3) span').text(eventData.location);

    // Populating the Event Description in "About" Tab
    mainContainer.find('#tab-about .event-des-wrap').html(`<p>${eventData.description}</p>`);
    mainContainer.find('#tab-entry-details .event-des-wrap').html(`<p>${eventData.entry_details}</p>`);

    if (eventData.has_tickets) {
        // Populating the Ticket Button URL
        mainContainer.find('.event-list-btn .btn.bg-dark').on('click', function () {
            window.location.href = eventData.ticket_url;
        });
    } else {
        // Hiding the Ticket Button
        mainContainer.find('.event-list-btn').hide();
    }

    // Populating the Swiper Images
    const swiperWrapper = mainContainer.find('.swiper-wrapper');
    swiperWrapper.empty(); // Clear existing placeholders

    const gallery = eventData.gallery || [];
    gallery.push({
        url: eventData.cover_photo.url
    });

    gallery.forEach(image => {
        const slide = `
        <div class="swiper-slide">
            <div class="swiper-image" style="background-image: url('${image.url}');"></div>
        </div>
    `;
        swiperWrapper.append(slide);
    });

    mainContainer.find('.event-des-wrap a').on('click', function (e) {
        console.log('clicked');
        e.preventDefault();
        window.open($(this).attr('href'), '_blank');
    });

    $('#copy-event-link').attr('data-event-id', eventId)
    $('#share-email-event-link').attr('data-event-id', eventId)

    // set the event id to the favourite button
    const faveBtn = $('#favourite_event')
    faveBtn.attr('data-event-id', eventId)

    if (eventData.is_liked) {
        faveBtn.addClass('favourite')
        faveBtn.innerHTML = `<i class="f7-icons">heart_fill</i> Favourite`
    } else {
        faveBtn.removeClass('favourite')
        faveBtn.innerHTML = `<i class="f7-icons">heart</i> Favourite`
    }
});

$(document).on('click', '#favourite_event', async function () {
    // get the event id from the button
    const eventId = $(this).attr('data-event-id');
    const isFavourite = $(this).hasClass('favourite');

    // optmisitically update the UI
    if (isFavourite) {
        $(this).removeClass('favourite')
        $(this).innerHTML = `<i class="f7-icons">heart</i> Favourite`
    } else {
        $(this).addClass('favourite')
        $(this).innerHTML = `<i class="f7-icons">heart_fill</i> Favourite`
    }

    // call the API to favourite the event
    await maybeFavoriteEvent(eventId);
})

$(document).on('click', '#copy-event-link', function () {
    const eventId = $(this).attr('data-event-id');
    const eventLink = `${window.location.origin}/discover-view-event/${eventId}`;

    navigator.clipboard.writeText(eventLink);


    app.toast.create({
        text: 'Link copied to clipboard',
        closeTimeout: 2000
    }).open()
});

$(document).on('click', '#share-email-event-link', function () {
    const eventId = $(this).attr('data-event-id');
    const eventLink = `${window.location.origin}/discover-view-event/${eventId}`;

    window.open(`mailto:?subject=Event Link&body=${eventLink}`, '_blank');
});