import { usePB } from "~/composables/usePB";
import type { componentsListType, PBPageItem } from "~/types";
// import { useI18n } from "vue-i18n";

export const useStore = defineStore("store", () => {
  const currentPageID = ref("");
  const pb = usePB();
  const { $i18n } = useNuxtApp();

  const components = ref({} as PBPageItem[]);
  const getSections = async (id: string) => {
    pb.cancelRequest("menu_view");
    components.value = (
      await pb.collection<PBPageItem>("page_view").getList(1, 50, {
        filter: `page_id="${id}"&&(section_lang_id_lang="${
          $i18n.locale.value
        }"||section_is_no_lang=${true})`,
        sort: "page_section_id_position", 
      })
    ).items as PBPageItem[];
  };

  async function getComponents(): Promise<componentsListType[]> {
    try {
      const children = components.value;

      if (!children || !Array.isArray(children)) {
        console.warn("No components available in store.");
        return [];
      }

      const componentsList = [] as componentsListType[];

      for (const child of children) {
        const componentName = child.component_name;
        const pageName = child.page_name;
        if (!componentName) continue;

        try {
          const componentInstance = (
            await import(`@/components/section/${pageName}/${componentName}.vue`)
          ).default;

          const nonReactiveComponent = markRaw(componentInstance);

          componentsList.push({
            name: componentName,
            component: child,
            componentInstance: nonReactiveComponent,
            data: child.section_lang_data,
          });
        } catch (error) {
          console.error(`Failed to load component ${componentName}`, error);
        }
      }
      return componentsList;
    } catch (error) {
      console.error("Failed to process components list", error);
    }
    return [];
  }

  return {
    currentPageID,
    components,
    getComponents,
    getSections,
  };
});