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