import {computed, watch} from 'vue'
import {defineStore} from 'pinia'
import {useAuthStore} from "@/stores/authStore.js";
import {useClient} from "@/plugins/api.js";
import {useSessionStorage} from "@vueuse/core";

export const useUserStore = defineStore(
    'user',
    () => {
        const authStore = useAuthStore()
        const authWatcher = watch(
            () => authStore.isAuthenticated,
            async (newValue, oldValue) => {
                if (newValue) {
                    await fetchCurrentUserProfile()
                } else {
                    user.value = undefined
                    creator.value = undefined
                }
            })       
        
        const user = useSessionStorage('user-user', {}, {writeDefaults: false})
        const creator = useSessionStorage('user-creator', {}, {writeDefaults: false})

        const alias = computed(() => {
            if (user.value) {
                return user.value.alias || `${user.value.firstName || ''} ${user.value.lastName || ''}`.trim() || 'Anonyme'
            }
            return 'Anonyme';
        })
        const portraitUrl = computed(() => {
            return user.value && user.value.portraitUrl
                ? user.value.portraitUrl
                : '/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png'
        })

        async function fetchCurrentUserProfile() {
            try {
                const client = useClient()
                const userResponse = await client.get("/api/GetMyUser");
                user.value = userResponse.data

                try {
                    const creatorId = userResponse.data.id
                    const creatorResponse = await client.get(`/api/creators/${creatorId}`)
                    creator.value = creatorResponse.data
                } catch (error) {
                    creator.value = undefined
                }
            } catch (error) {
                user.value = undefined;
            }
        }

        async function updateCurrentUser(userModel, profilePicture) {
            const client = useClient()
            await client.patch("/api/UpdateMyUser/profile", userModel)

            if (typeof userModel.storedDataUrls.profilePictureUrl !== "object") {
                const haveNewProfilePicture = profilePicture !== null && profilePicture.size !== 0;
                const updateProfilePictureEndpoint = haveNewProfilePicture ? `/api/UpdateMyUser/profile-picture` : `/api/UpdateMyUser/profile-picture?url=${userModel.storedDataUrls.profilePictureUrl}`;
                const response = await client.post(updateProfilePictureEndpoint, profilePicture, {
                    headers: {
                        'Content-Type': profilePicture?.type ?? "application/octet-stream",
                    }
                });

                if (haveNewProfilePicture) {
                    this.user.value.portraitUrl = response.data;
                }
            }

            this.user.value = userModel;
        }

        return {user, creator, alias, portraitUrl}
    })