import { useMyFetch } from "#imports";
// import { usePB } from "~/composables/usePB";
import type {
  componentsListType,
  GenericResponse,
  PlanPrediction,
} from "~/types";
// import { useI18n } from "vue-i18n";

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

  // calculator
  const monthlySavings = ref(137);
  const storagePeriod = ref(10);
  const totalInvestment: Ref<number> = ref(0);
  const minValue = ref();

  // login
  const email = ref();
  const password = ref();

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

  const getSections = async (id: string) => {
    // if(!id){
    //   id = useMenuStore().defaultMenu.id
    // }
    // console.log(useMenuStore().defaultMenu);
    
    const {data} = await useMyFetch<GenericResponse<FrontPageSection[]>>(
      `/api/public/front/sections/${id}`
    )
    // console.log(data, id, "data");
    components.value = data
    // return data

    // pb.cancelRequest("menu_view");
    // components.value = (
    //   await pb.collection<PBPageItem>("page_view").getList(1, 50, {
    //     filter: `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.front_section.component_name;
        // const pageName = child.front_section.page_name;
        if (!componentName) continue;

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

          const nonReactiveComponent = markRaw(componentInstance);
          componentsList.push({
            name: componentName,
            component: child.front_section,
            componentInstance: nonReactiveComponent,
            // data: child.front_section.front_section_lang[0].data || {} as unknown,
            // data: {}
          });
        } catch (error) {
          console.error(`Failed to load component ${componentName}`, error);
        }
      }
      return componentsList;
    } catch (error) {
      console.error("Failed to process components list", error);
    }
    return [];
  }

  async function getCalculator() {
    try {
      const { data } = await useMyFetch<GenericResponse<PlanPrediction>>(
        `/api/public/plan-prediction/easy/calculate?monthly_deposit=${monthlySavings.value}&years=${storagePeriod.value}`,
        {
          headers: {
            "Content-Type": "application/json",
          },
          onErrorOccured: (_, status) => {
            throw new Error(`HTTP error: ${status}`);
          },
        }
      );

      totalInvestment.value = data.total_investement_value;
    } catch (error) {
      console.error("getList error:", error);
    }
  }

  async function getMinValue() {
    try {
      const { data } = await useMyFetch<GenericResponse<number>>(
        "/api/public/plan-prediction/free/minimum",
        {
          headers: {
            "Content-Type": "application/json",
          },
          onErrorOccured: (_, status) => {
            throw new Error(`HTTP error: ${status}`);
          },
        }
      );

      // if (!res.ok) {
      //   throw new Error(`HTTP error: ${res.status}`);
      // }

      // const data = await res.json();
      minValue.value = data;
    } catch (error) {
      console.error("getList error:", error);
    }
  }

  async function logIn() {
    try {
      const { data } = await useMyFetch<GenericResponse<object>>(
        `/api/public/user/session/start`,
        {
          method: "POST",
          body: JSON.stringify({
            mail: email.value,
            password: password.value,
          }),
          headers: {
            "Content-Type": "application/json",
          },
          onErrorOccured: (_, status) => {
            throw new Error(`HTTP error: ${status}`);
          },
        }
      );

      minValue.value = data;
    } catch (error) {
      console.error("getList error:", error);
    }
  }

  getCalculator();
  getMinValue();

  return {
    currentPageID,
    components,
    totalInvestment,
    monthlySavings,
    storagePeriod,
    minValue,
    email,
    password,
    logIn,
    getCalculator,
    getComponents,
    getSections,
  };
});