import { defineStore, acceptHMRUpdate } from "pinia";

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

    async function fetchPageByCode(slug: any) {
      try {
        const { data } = await useFetch(`/api/dynamic-page/get-by-code/${slug}`)
        currentPage.value = {}
        currentPage.value = data.value
      } catch (error: any) {}
    }

    async function fetchPageById(id: string | number) {
      try {
        const { data } = await useFetch(`/api/dynamic-page/get-by-id/${id}`)
        currentPage.value = {}
        currentPage.value = data.value
      } catch (error: any) {}
    }

    const setSectionPublished = () => {
        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;
        });
        console.log(currentPage.value.sections ,'sectionPublished 2')
        
        sectionPublished.value = currentPage.value.sections && currentPage.value.sections.filter(
          (section: any) => section.isPublished && !contentArr.flat().some((_section: any) => _section && _section.data && _section.type === "section" && section.id === _section.data)
        );

        console.log(sectionPublished.value ,'sectionPublished')
    };

    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);
        console.log(componentPublished.value, 'componentPublished2')
      };

    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();
    };

    return {
        currentPage,
        sectionPublished,
        componentPublished,

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

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