import { defineStore, acceptHMRUpdate } from "pinia";
import { useLocalStorage } from "@vueuse/core";

export const useDynamicPageStore = defineStore("dynamicPageStore", () => {
    const currentPage = ref<any>({});
    const sectionPublished = ref<any[]>([]);
    const componentPublished = ref<any[]>([]);

    const url : any = useRequestURL();
    const host = url.hostname.split('.')[0];

    const setSectionPublished = () => {
      const exsitsTemplate = ['None']
      const contentArr: any = [];
      currentPage.value.sections && currentPage.value.sections.map((section: any) => {
        contentArr.push(section.content && typeof section.content === 'string' && JSON.parse(section.content));
        return section;
      });

      sectionPublished.value = currentPage.value.sections && currentPage.value.sections.filter(
        (section: any) => !exsitsTemplate.includes(section.settings?.template) && section.isPublished && !contentArr.flat().some((_section: any) => _section && _section.data && _section.type === "section" && section.id === _section.data)
      ).sort((a: any, b: any) => a.order - b.order);
    };

    const setComponentPublished = () => {
      const contentArr: any = [];
      currentPage.value.sections && currentPage.value.sections.map((section: any) => {
        contentArr.push(section.content && JSON.parse(section.content) && JSON.parse(section.content));
        return section;
      });
      componentPublished.value = currentPage.value.components && currentPage.value.components.filter((section: any) => section.isPublished);
    };

    const setDataQuery = (query: any, componentId: number | string) => {
        for (const _component of currentPage.value.components && currentPage.value.components) {
          if (_component.id === componentId) {
            const currentSetting = {
              ..._component.settings,
              dataQuery: query,
            };
            _component.settings = {
              ...currentSetting,
            };
            break;
          }
        }
        setComponentPublished();
    };

    async function fetchPageByCode(slug: any) {
      try {
        const page = await $fetch(`/api/dynamic-page/get-by-code/${slug}`, {
          query: {
            site: host
          }
        })
        currentPage.value = {}
        currentPage.value = page

        setSectionPublished();
        setComponentPublished();

        return {
          currentPage,
          sectionPublished,
          componentPublished
        }
      } catch (error: any) {}
    }

    async function getOverviewPageComponentById(componentId: any, dataQuery: any) {
      try {
        const { apiUrl } = useRuntimeConfig().public
        const res =  await $fetch(`${apiUrl}/cms/page-component/overview-page-component/${componentId}`, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(dataQuery),
        });
        return res
      } catch (err) {
        throw err;
      }
    }
    

    return {
        currentPage,
        sectionPublished,
        componentPublished,

        fetchPageByCode,
        setSectionPublished,
        setComponentPublished,
        setDataQuery,
        getOverviewPageComponentById
    };
});

if (import.meta.hot) {
    import.meta.hot.accept(acceptHMRUpdate(useDynamicPageStore, import.meta.hot));
}