import { onBeforeMount, ref } from 'vue'
import type { Ref } from 'vue';
import { useRoute } from 'vue-router';

import {
  activist,
  type Sticker as StickerType,
  useStickersStore,
} from '@/stores/stickersStore'


export function useSticker() {
  let sticker: Ref<StickerType> = ref<StickerType>(activist);
  const route = useRoute();
  if (!("id" in route.params)) {
    return sticker;
  }
  const id = ref<string>(route.params.id as string);
  const stickersStore = useStickersStore();
  const { getSticker } = stickersStore;

  onBeforeMount(async () => {
    await stickersStore.fetch(id.value);
    let sticker2 = getSticker(id.value);
    if (!sticker2) {
      return
    }
    sticker.value = sticker2;
    stickersStore.activeSticker = id.value
  });

  return sticker;
}