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 step = ref<number>(0)


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

        
        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)
        ).sort((a, b) => 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();
    };


    function increaseStep(increase: number) {
      step.value += increase
      return step.value
    }

    function decreaseStep(decrease: number) {
      step.value -= decrease
      return step.value
    }
    return {
        currentPage,
        sectionPublished,
        componentPublished,
        step,

        fetchPageByCode,
        fetchPageById,
        setSectionPublished,
        setComponentPublished,
        setDataQuery,

        increaseStep,
        decreaseStep,
    };
});

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