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

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

        const currentBrand = ref(undefined)
        const loading = ref(false)

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

        const defaultColors = {
            "background": "#f4f4f4",
            "error": "#f4f4f4",
            "primary": "#f4f4f4",
            "secondary": "#f4f4f4",
            "surface": "#f4f4f4",
            "onBackground": "#000",
            "onError": "#000",
            "onPrimary": "#000",
            "onSecondary": "#000",
            "onSurface": "#000",
        }
        const colors = ref(defaultColors)
        const presentationInfos = ref([]) 

        const route = useRoute()
        watch(
            () => route.params.creator,
            async (newCreator, oldCreator) => {
                loading.value = true

                if (newCreator !== oldCreator) {
                    if (newCreator !== undefined) {
                        value.value = await fetchCreatorData(newCreator)
                        currentBrand.value = newCreator
                        colors.value = value.value.colors
                        presentationInfos.value = value.value.presentationInfos 
                    } else {
                        value.value = {}
                        currentBrand.value = undefined
                        colors.value = defaultColors
                        presentationInfos.value = [] 
                    }
                }

                loading.value = false
            }
        )

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

        return {
            currentBrand,
            value,
            colors,
            loading,
            presentationInfos 
        }
    })