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