import {defineStore} from 'pinia'
import {useClient} from "@/plugins/api.js";
import {useSessionStorage} from "@vueuse/core";
import {onBeforeMount, ref, watch} from "vue";
import {useRoute} from "vue-router";

export const useBrandingStore = defineStore(
    'branding',
    () => {

        const currentBrand = ref('')
        
        const value = useSessionStorage(
            'branding',
            {},
            {writeDefaults: false})

        const loading = ref(true)

        const route = useRoute()

        onBeforeMount(async () => await fetchCreatorData(route.params.creator))

        watch(
            () => route.params.creator,
            async () => {
                console.log(`creator: ${route.params.creator}`)
                console.log(`currentBrand: ${currentBrand.value}`)
                if (route.params.creator != currentBrand.value) {
                    await fetchCreatorData(route.params.creator);
                    currentBrand.value = route.params.creator
                }
            }
        )

        const fetchCreatorData = async (creatorAlias) => {
            try {
                loading.value = true
                const client = useClient()
                const response = await client.get(`/api/creators/@${creatorAlias}`)
                value.value = response.data
            } catch (error) {
                console.error(`Error fetching content: ${error}`)
            } finally {
                loading.value = false
            }
        }

        return {
            value,
            loading
        }
    })