<template>
  <div>
    <NuxtLayout name="default" :menu="sidbarMenu">
      <!-- <ClientOnly> -->
      <!-- majles dashbaord -->
      <search-section v-if="buildName() == 'majles'"></search-section>
      <!-- monir dashboard -->
      <default-dashboard v-else></default-dashboard>
      <!-- </ClientOnly> -->
    </NuxtLayout>
  </div>
</template>

<script lang="ts">
// import monirMenu from "~/json/dashboard/monir/menu.json";
import monirMenu from "~/json/dashboard/monir/menu.json";
import majlesMenu from "~/json/dashboard/majles/menuDefault.json";

import { mapActions, mapState } from "pinia";
import { useCommonStore } from "~/stores/commonStore";

// import searchApi from "~/apis/searchApi";
import { useStorage } from "@vueuse/core";

// import DefaultDashboard from "@/components/dashboard/default/DefaultDashboard.vue";
// import SearchSection from "@/components/dashboard/majles/SearchSection.vue";

export default {
  name: "defaultRoute",
  // async asyncData() {
  //   console.info("asyncData");

  //   // Fetch data from the API route
  //   const { data } = await useFetch("/api/ali");
  //   return { data: data.value };
  // },
  setup() {
    // console.info("setup");
    // const { count, increment, decrement } = useMyComposable();
    // console.info(count, increment, decrement);
    // const requestFetch = useRequestFetch();
    // Fetch data with headers forwarded
    // const fetchDataWithHeaders = async () => {
    //   console.info("fetchDataWithHeaders");
    //   const { data: forwarded } = await useAsyncData(() =>
    //     requestFetch("/api/ali")
    //   );
    //   console.log("Forwarded:", forwarded.value);
    // };
    // Fetch data without headers forwarded
    // const fetchDataWithoutHeaders = async () => {
    //   const { data: notForwarded } = await useAsyncData(() =>
    //     $fetch("/api/cookies")
    //   );
    //   console.log("Not Forwarded:", notForwarded.value);
    // };
    // Call the functions when the component is mounted
    // onMounted(() => {
    // console.info("onMounted");
    //   fetchDataWithHeaders();
    //   // fetchDataWithoutHeaders();
    // });
    definePageMeta({
      name: "defaultRoute",
      layout: false,
      // layout: "dashboard-layout",
    });
    // if (isMajlesBuild()) return this.majlesMenu;
    // else return this.monirMenu;
    // return {
    //   count,
    //   increment,
    //   decrement,
    // };
  },
  async created() {
    // await this.fetchUsers(); // Fetch users when the component is created
    // await this.fetchSchema(); // Fetch users when the component is created
  },
  beforeMount() {
    if (buildName() == "majles") this.sidebarMenuSetter(majlesMenu);
    else this.sidebarMenuSetter(monirMenu);
    // const commonStore = useCommonStore();
    // commonStore.clearBodyClass();
  },
  async mounted() {
    // const data = useGetSchema();
    // console.info("data", data);
    // console.info("mounted");
    // const commonStore = useCommonStore();
    // commonStore.sidebarMenuSetter(monirMenu);
  },
  data() {
    return {
      users: [],
      schema: [],
    };
  },
  computed: {
    ...mapState(useCommonStore, ["organNameGetter"]),
    sidbarMenu() {
      if (isMajlesBuild()) return majlesMenu;
      else return monirMenu;
    },
  },
  methods: {
    ...mapActions(useCommonStore, ["sidebarMenuSetter"]),

    // Fetch all users
    async fetchSchema() {
      let token = useStorage("id_token", "GuestAccess").value;
      // console.info(token)

      try {
        this.schema = await $fetch("/api/ali", {
          method: "post",
          headers: {
            Authorization: token,
          },
          body: {
            organ: this.organNameGetter,
            system: "search",
            build_state: buildState(),
          },
        });
      } catch (error) {
        console.error("Error fetching users:", error);
      }
    },
    async fetchUsers() {
      try {
        this.users = await $fetch("/api/users");
      } catch (error) {
        console.error("Error fetching users:", error);
      }
    },
  },
  components: {
    // LazyDefaultDashboard: DefaultDashboard,
    // LazySearchSection: SearchSection,
    DefaultDashboard: defineAsyncComponent(
      () => import("@/components/dashboard/default/DefaultDashboard.vue")
    ),
    SearchSection: defineAsyncComponent(
      () => import("@/components/dashboard/majles/SearchSection.vue")
    ),
  },
};
</script>