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()
})