import {
    fetchVenue,
    maybeFollowVenue
} from "./api/discover.js";
import app from "./app.js";

var $ = Dom7;

//DISCOVER - VIEW EVENT
$(document).on('page:init', '.page[data-name="discover-view-venue"]', async function (e) {
    var venueId = e.detail.route.params.id

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

    $('.loading-fullscreen').show()
    const venueData = await fetchVenue(venueId);

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

    $('#copy-venue-link').attr('data-venue-id', venueId);
    $('#share-email-venue-link').attr('data-venue-id', venueId);

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

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

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

    // Populating the Event Location
    mainContainer.find('.event-time-address span').text(venueData.location);

    // Populating the Cover Image
    mainContainer.find('.event-detail-img-box .swiper-slide .swiper-image')
        .css('background-image', `url('${venueData.cover_photo.url}')`)
        .attr('alt', venueData.cover_photo.alt);

    // Populating the "About" Tab Content
    mainContainer.find('#tab-about .event-des-wrap').html(`<p>${venueData.description}</p>`);

    // Populating the "Follow" button state
    const followButton = mainContainer.find('.event-list-btn .btn.bg-dark');
    if (venueData.is_following) {
        followButton.text('Following');
    } else {
        followButton.text('Follow');
    }

    // Populating the "Upcoming Events" Tab (if there are any events)
    const eventsContainer = mainContainer.find('#tab-events .grid.event-listing');
    eventsContainer.empty(); // Clear any placeholder content

    if (venueData.events.length > 0) {
        venueData.events.forEach(event => {
            const startDate = new Date(event.start_date);
            const endDate = new Date(event.end_date);

            const startMonth = startDate.toLocaleString('default', {
                month: 'short'
            });
            const startDay = startDate.getDate();

            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 eventItem = `
            <a href="/discover-view-event/${event.id}" 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>${startMonth}</p>
                            <h5>${startDay}</h5>
                        </div>
                        ${endDateString}
                    </div>
                </div>
                <div class="card-content">
                    <h3 class="event-title">${event.title}</h3>
                    <p class="event-info">Starts ${event.start_date}</p>
                    <div class="event-info">${event.location}</div>
                </div>
            </a>
        `;
            eventsContainer.append(eventItem);
        });
    } else {
        eventsContainer.html('<div class="text-align-center">No upcoming events</div>');
    }

    // follow button
    const is_following = venueData.is_following

    if (is_following) {
        mainContainer.find('.venue-follow-btn').text('Following')
    }

    mainContainer.find('.venue-follow-btn').on('click', async function () {
        const followButton = $(this);
        const isFollowing = followButton.text() === 'Following';

        // change the button text
        followButton.text(isFollowing ? 'Follow' : 'Following');
        const response = await maybeFollowVenue(venueId)
    });
})

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

    navigator.clipboard.writeText(eventLink);

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

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

    window.open(`mailto:?subject=Check out this venue&body=${eventLink}`);
});