import {
    getSessionUser,
    getUserById
} from "./api/auth.js"
import {
    getUserGarage
} from "./api/garage.js"
import {
    maybeFollowUser
} from "./api/profile.js"
import app from "./app.js"
import {
    createGarageContent,
    displayProfile,
    fillGridWithPosts
} from "./profile.js"
import store from "./store.js"

var $ = Dom7

var totalPostPages = 1
var totalFPostPages = 1
var currentPostPage = 1
var currentFPostPage = 1

var isFetchingPosts = false
var refreshed = false;

var userId = null

$(document).on(\'page:init\', \'.page[data-name="profile-view"]\', async function (e) {
    userId = e.detail.route.params.id

    currentPostPage = 1
    currentFPostPage = 1
    isFetchingPosts = false
    refreshed = false

    store.dispatch(\'getUserPosts\', {
        user_id: userId,
        clear: true
    })

    store.dispatch(\'getUserTags\', {
        user_id: userId,
        clear: true
    })
})

$(document).on(\'page:beforein\', \'.page[data-name="profile-view"]\', async function (e) {
    $(\'.loading-fullscreen\').show()

    var pathStore = store.getters.getPathData
    userId = e.detail.route.params.id

    const sessionUser = await getSessionUser()

    if (!sessionUser || !sessionUser.id) {
        return;
    }

    // Follow button
    const followButton = $(\'.user-follow-btn\')
    const sessionFollowings = sessionUser.following;

    if (sessionFollowings.includes(`${userId}`)) {
        followButton.text(\'Following\')
    } else {
        followButton.text(\'Follow\')
    }

    followButton.attr(\'data-user-id\', userId)

    let cachedData = null
    try {
        if (pathStore && pathStore.value[`/user/${userId}`]) {
            cachedData = pathStore.value[`/user/${userId}`]
        }
    } catch (error) {
        console.error(\'Error fetching cached data:\', error)
    }

    await renderProfileData(cachedData, userId)
})

$(document).on(\'click\', \'.user-follow-btn\', async function () {
    const followButton = $(this)
    const isFollowing = followButton.text() === \'Following\'

    // change the button text
    followButton.text(isFollowing ? \'Follow\' : \'Following\')
    const response = await maybeFollowUser(followButton.attr(\'data-user-id\'))

    if (response && response.success) {
        store.dispatch(\'updateUserDetails\', {
            external: true
        })
    }
})

async function renderProfileData(cachedData, userId) {
    // if (!refreshed && !cachedData) {
    // }

    refreshed = false

    if (!cachedData) {
        const data = await getUserById(userId)
        console.log(\'User data:\', data);

        if (!data || data.error) {
            $(\'.loading-fullscreen\').hide()
            app.dialog.alert(\'User not found\', \'Error\')

            view.router.back(view.history[0], {
                force: true
            })
            return
        }

        const garage = await getUserGarage(userId)

        if (garage) {
            createGarageContent(garage, \'.pview-current-vehicles-list\', \'.pview-past-vehicles-list\')
        }

        // Assuming `path` is a dynamic path like \'/garage/2\'
        store.dispatch(\'setPathData\', {
            path: `/user/${userId}`,
            data: {
                user: data.user,
                garage: garage,
            },
        })

        displayProfile(data.user, \'profile-view\')
    } else {
        displayProfile(cachedData.user, \'profile-view\')

        if (cachedData.garage) {
            createGarageContent(cachedData.garage, \'.pview-current-vehicles-list\', \'.pview-past-vehicles-list\')
        }
    }

    $(\'.loading-fullscreen\').hide()
}

function populateUsersPosts(data) {
    if (data) {
        const postsKey = `user-${userId}-posts`
        //const tagsKey = `user-${userId}-tags`

        // Handle posts
        if (data[postsKey]) {
            totalPostPages = data[postsKey].total_pages || 0

            let reset = data[postsKey].cleared || false

            console.log(reset);

            // Only update the DOM if there are new posts
            if (data[postsKey].new_data && data[postsKey].new_data.length > 0) {
                fillGridWithPosts(data[postsKey].new_data, \'profile-view-grid-posts\', reset)
                // Clear new_data after processing to avoid re-rendering

                data[postsKey].new_data = []
            }

            if ((data[postsKey].page === totalPostPages) || (totalPostPages == 0)) {
                // hide preloader
                $(\'.infinite-scroll-preloader.posts-tab.view-profile\').hide()
            }

            if (data[postsKey].data.length === 0) {
                const profileGrid = document.getElementById(\'profile-view-grid-posts\')
                profileGrid.innerHTML = \'<p></p><p>No posts</p>\'
                return;
            }

        }

        // Handle tags
        /*
        if (data[tagsKey]) {
            totalFPostPages = data[tagsKey].total_pages || 0

            let reset = data[tagsKey].cleared || false

            // Only update the DOM if there are new tags
            if (data[tagsKey].new_data && data[tagsKey].new_data.length > 0) {
                fillGridWithPosts(data[tagsKey].new_data, \'profile-view-grid-tags\', reset)
                // Clear new_data after processing to avoid re-rendering
                data[tagsKey].new_data = []
            }

            if ((data[tagsKey].page === totalFPostPages) || (totalFPostPages == 0)) {
                // hide preloader
                $(\'.infinite-scroll-preloader.tags-tab.view-profile\').hide()
            }
            /*
            if (data[tagsKey].data.length === 0) {
                const profileGrid = document.getElementById(\'profile-view-grid-tags\')
                profileGrid.innerHTML = \'<p></p><p>No tagged posts</p>\'
                return;
            }
            --
        }*/
    }
}

store.getters.getUserPathUpdated.onUpdated(() => {
    const data = store.getters.getUserPathData.value
    populateUsersPosts(data)
})

$(document).on(\'infinite\', \'.profile-landing-page.infinite-scroll-content.view-page\', async function (e) {
    if (isFetchingPosts) return

    const activeTab = document.querySelector(\'.profile-tabs .tab-link-active\')
    const activeTabId = activeTab.id

    if (!activeTabId || activeTabId === \'my-garage\') return

    const getterFunc = activeTabId === \'my-posts\' ? \'getUserPosts\' : \'getUserTags\'

    isFetchingPosts = true

    if (activeTabId === \'my-posts\') {
        currentPostPage++
        if (currentPostPage <= totalPostPages) {
            await store.dispatch(getterFunc, {
                user_id: userId,
                page: currentPostPage
            })
            isFetchingPosts = false
        }
    } else {
        currentFPostPage++

        if (currentFPostPage <= totalFPostPages) {
            await store.dispatch(getterFunc, {
                user_id: userId,
                page: currentFPostPage
            })
            isFetchingPosts = false
        }
    }
})

$(document).on(\'ptr:refresh\', \'.profile-landing-page.view-page.ptr-content\', async function (e) {
    try {
        currentPostPage = 1
        currentFPostPage = 1

        store.dispatch(\'removePathData\', `/user/${userId}`)

        await renderProfileData(null, userId)

        store.dispatch(\'getUserPosts\', {
            user_id: userId,
            clear: true
        })

        store.dispatch(\'getUserTags\', {
            user_id: userId,
            clear: true
        })

        refreshed = true
    } catch (error) {
        console.log(\'Error refreshing profile page:\', error);
    }

    app.ptr.get(\'.profile-landing-page.view-page.ptr-content\').done()
})