import {
    getSessionUser
} from \\\"./api/auth.js\\\"
import {
    maybeFollowUser
} from \\\"./api/profile.js\\\"
import app from \\\"./app.js\\\"
import store from \\\"./store.js\\\"

var $ = Dom7
var notificationsStore = store.getters.getNotifications
var refreshed = false

$(document).on(\\\\\\\'page:afterin\\\\\\\', \\\\\\\'.page[data-name=\\\"notifications\\\"]\\\\\\\', async function (e) {
    const data = notificationsStore.value

    if (!data || !data.success) {
        return
    }

    // a list if all unread notification ids
    const unreadNotificationIds = [
        ...data.data.recent,
        ...data.data.last_week,
        ...data.data.last_30_days,
    ].filter((item) => item.is_read === \\\"0\\\").map((item) => item._id);

    if (unreadNotificationIds.length > 0) {
        store.dispatch(\\\\\\\'markNotificationsAsRead\\\\\\\', unreadNotificationIds)
    }
})

notificationsStore.onUpdated(async (data) => {
    if (!data || !data.success) {
        $(\\\\\\\'.notification-wrap\\\\\\\').html(\\\\\\\'<p class=\\\"text-center\\\">No notifications</p>\\\\\\\')
        return
    }

    const notifications = data.data

    const recentContainer = document.getElementById(\\\\\\\'recent\\\\\\\');
    const thisWeekContainer = document.getElementById(\\\\\\\'this-week\\\\\\\');

    if (refreshed) {
        recentContainer.innerHTML = \\\\\\\'\\\\\\\';
        thisWeekContainer.innerHTML = \\\\\\\'\\\\\\\';
        refreshed = false
    }

    document.querySelectorAll(\\\\\\\'.app-notification-title\\\\\\\').forEach(elem => {
        elem.innerHTML = elem.getAttribute(\\\\\\\'data-title\\\\\\\')
    })

    var user = await getSessionUser()

    if (!notifications.recent.length) {
        recentContainer.innerHTML = \\\\\\\'<p class=\\\"text-center\\\">No recent notifications</p>\\\\\\\';
    }

    if (!notifications.last_week.length) {
        thisWeekContainer.innerHTML = \\\\\\\'<p class=\\\"text-center\\\">No notifications from this week</p>\\\\\\\';
    }

    notifications.recent.forEach(notification => {
        const notificationItem = createNotificationItem(notification, user);
        recentContainer.appendChild(notificationItem);
    });

    notifications.last_week.forEach(notification => {
        const notificationItem = createNotificationItem(notification, user);
        thisWeekContainer.appendChild(notificationItem);
    });
})

function timeAgo(dateString) {
    const now = new Date();
    const past = new Date(dateString);
    const diffInHours = Math.floor((now - past) / (1000 * 60 * 60));
    return diffInHours > 24 ? `${Math.floor(diffInHours / 24)}d ago` : `${diffInHours}h ago`;
}

function createNotificationItem(notification, user) {
    const isFollow = notification.type === \\\\\\\'follow\\\\\\\' ? true : false;
    const container = document.createElement(isFollow ? \\\\\\\'div\\\\\\\' : \\\\\\\'a\\\\\\\');

    if (!isFollow) {
        container.href = `/post-view/${notification.entity.entity_id}`;
    }

    let isReadClass = notification.is_read == \\\"0\\\" ? \\\"unread-notif\\\" : \\\"\\\";

    container.className = `notification-item ${isReadClass}`;
    container.dataset.notificationId = notification._id;

    // Profile image and notification content container
    const leftContainer = document.createElement(\\\\\\\'div\\\\\\\');
    leftContainer.className = \\\\\\\'notification-left\\\\\\\';

    const imageDiv = document.createElement(\\\\\\\'a\\\\\\\');
    imageDiv.className = \\\\\\\'image-square image-rounded\\\\\\\';
    imageDiv.style.backgroundImage = `url(\\\\\\\'${notification.entity.initiator_data.profile_image || \\\\\\\'assets/img/profile-placeholder.jpg\\\\\\\'}\\\\\\\')`;
    imageDiv.href = `/profile-view/${notification.entity.user_id}`;

    const infoDiv = document.createElement(\\\\\\\'div\\\\\\\');
    infoDiv.className = \\\\\\\'notification-info\\\\\\\';

    let content = \\\\\\\'\\\\\\\';

    // Conditional content rendering based on the type
    if (notification.type === \\\\\\\'like\\\\\\\') {
        content = `
            <div class=\\\"notification-text\\\">
                <a href=\\\"/profile-view/${notification.entity.user_id}\\\"><strong>${notification.entity.initiator_data.display_name}</strong></a> liked your ${notification.entity.entity_type}
                ${notification.entity.entity_data.comment ? `<span class=\\\"inline font-semibold text-black\\\">: \\\"${notification.entity.entity_data.comment}\\\"</span>` : \\\\\\\'\\\\\\\'}
                <span class=\\\"\\\"></span>
            </div>
        `;
    } else if (notification.type === \\\\\\\'comment\\\\\\\') {
        const eclipseComment = notification.entity.entity_data.comment.length > 50 ? notification.entity.entity_data.comment.substring(0, 50) + \\\\\\\'...\\\\\\\' : notification.entity.entity_data.comment;

        container.href = `/post-view/${notification.entity.entity_data.post_id}?commentId=${notification.entity.entity_id}`;

        content = `
            <div class=\\\"notification-text\\\">
                <a href=\\\"/profile-view/${notification.entity.user_id}\\\"><strong>${notification.entity.initiator_data.display_name}</strong></a> commented on your post: 
                <span class=\\\"font-semibold text-black\\\">\\\"${eclipseComment}\\\"</span>
                <span class=\\\"${isReadClass}\\\"></span>
            </div>
        `;
    } else if (notification.type === \\\\\\\'follow\\\\\\\') {
        content = `
            <div class=\\\"notification-text\\\">
                <a href=\\\"/profile-view/${notification.entity.user_id}\\\"><strong>${notification.entity.initiator_data.display_name}</strong></a> followed you
                <span class=\\\"${isReadClass}\\\"></span>
            </div>
        `;
    } else if (notification.type === \\\\\\\'mention\\\\\\\') {
        content = `
            <div class=\\\"notification-text\\\">
                <a href=\\\"/profile-view/${notification.entity.user_id}\\\"><strong>${notification.entity.initiator_data.display_name}</strong></a> mentioned you in a ${notification.entity.entity_type}
                ${notification.entity.entity_data.comment ? `<span class=\\\"block font-semibold text-black\\\">\\\"${notification.entity.entity_data.comment}\\\"</span>` : \\\\\\\'\\\\\\\'}
                <span class=\\\"${isReadClass}\\\"></span>
            </div>
        `;
    } else if (notification.type === \\\\\\\'post\\\\\\\') {
        content = `
            <div class=\\\"notification-text\\\">
                <a href=\\\"/profile-view/${notification.entity.user_id}\\\"><strong>${notification.entity.initiator_data.display_name}</strong></a> has posted ${notification.entity.entity_type === \\\\\\\'car\\\\\\\' ? \\\"your car\\\" : \\\"a post\\\"} 
                <a href=\\\"/profile/garage/${notification.entity.entity_data?.garage?.id}\\\" class=\\\"font-semibold hover:cursor-pointer hover:text-customblue\\\">
                    ${notification.entity.entity_data?.garage?.make || \\\\\\\'\\\\\\\'} ${notification.entity.entity_data?.garage?.model || \\\\\\\'\\\\\\\'}
                </a>
                <span class=\\\"${isReadClass}\\\"></span>
            </div>
        `;
    } else if (notification.type === \\\\\\\'tag\\\\\\\') {
        content = `
            <div class=\\\"notification-text\\\">
                <a href=\\\"/profile-view/${notification.entity.user_id}\\\"><strong>${notification.entity.initiator_data.display_name}</strong></a> ${notification.entity.entity_type === \\\\\\\'car\\\\\\\' ? \\\"tagged your car in a post\\\" : \\\"tagged you in a post\\\"}
                <span class=\\\"${isReadClass}\\\"></span>
            </div>
        `;
    }

    // Add time ago
    const timeSpan = document.createElement(\\\\\\\'span\\\\\\\');
    timeSpan.className = \\\\\\\'notification-time\\\\\\\';
    timeSpan.textContent = timeAgo(notification.date);


    infoDiv.innerHTML = `${content} ${timeSpan.outerHTML}`;

    // Adding profile image and content to the left container
    leftContainer.appendChild(imageDiv);
    leftContainer.appendChild(infoDiv);

    // Append left container to the main container
    container.appendChild(leftContainer);

    if (notification.type === \\\\\\\'follow\\\\\\\') {
        const isFollowing = user.following.includes(notification.entity.user_id);
        let followBtn = `<div class=\\\"btn btn-primary btn-sm toggle-follow\\\" data-is-following=\\\"${isFollowing}\\\" data-user-id=\\\"${notification.entity.user_id}\\\">
            ${isFollowing ? \\\\\\\'Unfollow\\\\\\\' : \\\\\\\'Follow\\\\\\\'}
        </div>`;

        container.innerHTML += followBtn;
    } else {
        const rightContainer = document.createElement(\\\\\\\'a\\\\\\\');
        rightContainer.className = \\\\\\\'notification-left\\\\\\\';
        let path;

        if (notification.entity.entity_type === \\\\\\\'car\\\\\\\') {
            path = \\\\\\\'car\\\\\\\';
            rightContainer.href = `/${path}/${notification.entity.entity_id}`;

        } else if (notification.entity.entity_type === \\\\\\\'post\\\\\\\') {
            path = \\\\\\\'post-view\\\\\\\';
            rightContainer.href = `/${path}/${notification.entity.entity_id}`;

        } else if (notification.entity.entity_type === \\\\\\\'comment\\\\\\\') {
            path = \\\\\\\'post-view\\\\\\\';
            rightContainer.href = `/${path}/${notification.entity.entity_data.post_id}?commentId=${notification.entity.entity_id}`;
        } else {
            path = \\\\\\\'profile-view\\\\\\\';
            rightContainer.href = `/${path}/${notification.entity.user_id}`;
        }


        const imageDiv = document.createElement(\\\\\\\'div\\\\\\\');
        imageDiv.className = \\\\\\\'image-square image-rounded\\\\\\\';
        imageDiv.style.backgroundImage = `url(\\\\\\\'${notification.entity.entity_data.media}\\\\\\\')`;
        imageDiv.style.backgroundSize = \\\\\\\'cover\\\\\\\';
        imageDiv.style.backgroundPosition = \\\\\\\'center\\\\\\\';
        imageDiv.style.backgroundColor = \\\\\\\'#f1f1f1\\\\\\\';

        rightContainer.appendChild(imageDiv);
        container.appendChild(rightContainer)
    }

    return container;
}

$(document).on(\\\\\\\'click\\\\\\\', \\\\\\\'.toggle-follow\\\\\\\', async function (e) {
    const userId = e.target.dataset.userId;
    const isFollowing = e.target.dataset.isFollowing === \\\\\\\'true\\\\\\\';

    // update the button text
    e.target.textContent = isFollowing ? \\\\\\\'Follow\\\\\\\' : \\\\\\\'Unfollow\\\\\\\';
    e.target.dataset.isFollowing = !isFollowing;

    await maybeFollowUser(userId);
    store.dispatch(\\\\\\\'updateUserDetails\\\\\\\')
});

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

    try {
        await store.dispatch(\\\\\\\'notificationCount\\\\\\\')
        await store.dispatch(\\\\\\\'fetchNotifications\\\\\\\')
    } catch (error) {
        console.log(error);
    }

    app.ptr.get(\\\\\\\'.notification-page.ptr-content\\\\\\\').done()
})