import { defineStore } from 'pinia'
import { Breadcrumb } from '@/components/nav/nav'
import { MaybeRefOrGetter, ref, toRef, watch } from 'vue'
import { tryOnScopeDispose } from '@vueuse/core'

export function useBreadcrumbs(breadcrumbs: MaybeRefOrGetter<Breadcrumb[]>) {
  const store = useNavStore()
  const unwatch = watch(
    toRef(breadcrumbs),
    (_breadcrumbs) => {
      store.breadcrumbs = _breadcrumbs
    },
    { immediate: true },
  )
  tryOnScopeDispose(() => {
    unwatch()
    store.breadcrumbs = []
  })
}

export const useNavStore = defineStore('nav', () => {
  const breadcrumbs = ref<Breadcrumb[]>([])
  return {
    breadcrumbs: breadcrumbs,
  }
})