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