import { useStoryblokApi, useStoryblokBridge } from "@storyblok/vue";
import { useAsyncData, useState, onMounted, createError } from "#imports";
export const useAsyncStoryblok = async (url, apiOptions = {}, bridgeOptions = {}) => {
  const uniqueKey = `${JSON.stringify(apiOptions)}${url}`;
  const story = useState(`${uniqueKey}-state`, () => ({}));
  const storyblokApiInstance = useStoryblokApi();
  onMounted(() => {
    if (story.value && story.value.id) {
      useStoryblokBridge(
        story.value.id,
        (evStory) => story.value = evStory,
        bridgeOptions
      );
    }
  });
  const { data, error } = await useAsyncData(
    `${uniqueKey}-asyncdata`,
    () => storyblokApiInstance.get(`cdn/stories/${url}`, apiOptions)
  );
  if (error.value?.response && error.value?.response.status >= 400 && error.value?.response.status < 600) {
    throw createError({ statusCode: error.value?.response.status, statusMessage: error.value?.message?.message || "Something went wrong when fetching from storyblok." });
  }
  story.value = data.value?.data.story;
  return story;
};