<template>
  <HadithLayout :menu="sidbarMenu"> hadith page </HadithLayout>
</template>
<script>
import { useStorage } from "@vueuse/core";
import { mapActions, mapState } from "pinia";

import { useHadithStore } from "@hadith/stores/hadithStore";
import { useCommonStore } from "~/stores/commonStore";
import hadithApi from "@hadith/apis/hadithApi.js";
import navbarMenu from "@hadith/json/hadith/menu.json";

export default {
  name: "hadith",
  setup() {
    useHead({
      title: import.meta.env.VITE_HADITH_PAGE_TITLE,
      meta: [
        { name: "description", content: "کاوش با هوش مصنوعی در احادیث اسلامی" },
      ],
      bodyAttrs: {
        class: import.meta.env.VITE_HADITH_SYSTEM,
      },
    });

    definePageMeta({
      layout: false,
      name: "hadith",
    });
  },

  created() {
    this.httpService = useNuxtApp()["$http"];
  },

  async mounted() {
    this.logo = (await logoPhoto()).default;

    let schemaExist = this.searchActiveTabGetter && this.searchSchemaGetter;

    if (!schemaExist) this.getSchemas();
    else this.setSearchDomain(this.searchActiveTabGetter);

    if (window.outerWidth < 992) {
      this.$store.commit("TOGGLE_SIDEBAR_MENU");
      this.showMobileFilterList = true;
    }
  },

  data() {
    return {
      httpService: {},
      logo: "",
      sidbarMenuDefault: navbarMenu,
    };
  },

  computed: {
    // ...mapState(useHadithStore, [
    //   "domainActiveGetter",
    //   "searchActiveTabGetter",
    //   "searchSchemaGetter",
    //   "searchSynonymTitleGetter",
    // ]),
    ...mapState(useCommonStore, [
      "currentUser",
      "organNameGetter",
      "isSidebarCollapsed",
      "userPermisionGetter",
    ]),

    sidbarMenu() {
      return this.sidbarMenuDefault;
    },
  },
  methods: {
    ...mapActions(useCommonStore, [
      "TOGGLE_SIDEBAR_MENU",
      "sidebarCollapsedSetter",
    ]),

    // ...mapActions(useHadithStore, [
    //   "searchActiveTabSetter",
    //   "searchSchemaSetter",
    //   "domainActiveSetter",
    //   "searchSynonymTitleSetter",
    // ]),

    async getSchemas() {
      let localStoageSearchSchema = useStorage("searchSchema", undefined).value;

      if (localStoageSearchSchema) {
        let searchSchema = JSON.parse(localStoageSearchSchema);
        this.searchSchemaSetter(searchSchema);
        this.searchActiveTabSetter(searchSchema[0]);
      } else {
        const payload = {
          organ: this.organNameGetter,
          system: "search",
          build_state: buildState(),
        };
        const url = repoUrl() + hadithApi.schema.list;

        this.httpService
          .postRequest(url, payload)
          .then((res) => {
            this.searchSchemaSetter(res.data.search);
            this.searchActiveTabSetter(res.data.search[0]);
            this.fetchingData = false;

            const toast = useToast();
            toast.add({
              title: "Success",
              description: "Your action was completed successfully.",
              color: "success",
            });
          })
          .catch((err) => {
            this.fetchingData = false;
          });
      }
    },
  },
  components: {
    AutoComplation: defineAsyncComponent(() =>
      import("@hadith/components/hadith/AutoComplation.vue")
    ),
    HadithLayout: defineAsyncComponent(() =>
      import("@hadith/layouts/HadithLayout.vue")
    ),
  },
};
</script>
