<script setup lang="ts">
// 1. Imports
// 2. Metas
// 3. Props
// 2. Reactive State
// 3. Computed Properties
// 4. Functions / Methods
// 5. Lifecycle Hooks
// 6. Watchers

const route = useRoute();
const router = useRouter();

// #region imports
import hadithaApi from "@haditha/apis/hadithaApi";
import type { HadithResponseModel, Hits } from "@haditha/types/hadithType";
import type { Hit } from "~/systems/hadith_ui/types/hadithType";
import headLinks from "@haditha/json/haditha/headLinks";
import headMetas from "@haditha/json/haditha/headMetas";

// #endregion imports

// #region meta

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

useHead({
  title: `${import.meta.env.VITE_HADITH_PAGE_TITLE} | ${route.params.slug}`,
  meta: [
    { name: "description", content: "کاوش با هوش مصنوعی در احادیث اسلامی" },
    ...headMetas,
  ],
  bodyAttrs: {
    class: [import.meta.env.VITE_HADITH_SYSTEM, "library-show-page"],
  },
  link: headLinks,
});
// #endregion imports
// #region props

// const props = defineProps({
//   list: {
//     default() {
//       return [];
//     },
//   },
//   noDataText: {
//     default: "نتیجه‌ای یافت نشد!",
//   },
//   noDataIcon: {
//     default: "/img/haditha/no-data.png",
//   },
// });
// #endregion props

// #region refs and reactives

// const page_num = computed({
//   // getter
//   get() {
//     return selectedItem.value?.[0]._source.address.page_num - 1 >= 1
//       ? selectedItem.value?.[0]._source.address.page_num - 1
//       : 1;
//   },
//   // setter
//   set(newValue) {
//     // handlePagination(1, newValue);
//   },
// });

const isModalOpen = ref(false);
const httpService = useNuxtApp()["$http"];
const loading = useState("loading", () => false);
const page_num = useState("page_num", () => 1);
const volumeInfo = useState("volumeInfo", () => {});

const state = reactive({
  treeItems: [
    {
      title: "فصل اول",
      icon: "lucide:plus",
      children: [
        { title: "useAuth.ts", icon: "vscode-icons:file-type-typescript" },
        { title: "useUser.ts", icon: "vscode-icons:file-type-typescript" },
      ],
    },
    {
      title: "فصل دوم",
      icon: "lucide:plus",
      children: [
        { title: "useAuth.ts", icon: "vscode-icons:file-type-typescript" },
        { title: "useUser.ts", icon: "vscode-icons:file-type-typescript" },
      ],
    },
    {
      title: "فصل سوم",
      icon: "lucide:plus",
      children: [
        {
          title: "بخش اول",
          icon: "lucide:plus",
          children: [
            { title: "بخش اول-یک", icon: "vscode-icons:file-type-vue" },
            {
              title: "بخش اول-دو",
              icon: "vscode-icons:file-type-vue",
              children: [
                { title: "بخش اول-یک-یک", icon: "vscode-icons:file-type-vue" },
                { title: "بخش اول-یک-دو", icon: "vscode-icons:file-type-vue" },
              ],
            },
          ],
        },
        {
          title: "بخش دوم",
          icon: "lucide:plus",
          children: [
            { title: "Card.vue", icon: "vscode-icons:file-type-vue" },
            {
              title: "Button.vue",
              icon: "vscode-icons:file-type-vue",
            },
          ],
        },
      ],
    },
    { title: "فصل چهارم", icon: "vscode-icons:file-type-vue" },
    { title: "فصل پنجم", icon: "vscode-icons:file-type-nuxt" },
  ],
});

// #endregion refs and reactives

// #region methods
const fetchData = async (page_first = 0) => {
  const pageNum = route.query.page_num;
  const volId = route.params.id;
  page_num.value = pageNum ?? page_first;

  let url = repoUrl() + hadithaApi.library.show;
  url = url.replace("@appname", "monir");
  url = url.replace("@page_len", 1);
  url = url.replace("@vol_id", volId);
  url = url.replace("@page_start", page_num.value);

  return await httpService.getRequest(url).then((res) => {
    volumeInfo.value = res.meta;

    // for first time and navigating from book list.
    if (page_num.value == 0) page_num.value = volumeInfo.value.page_first;

    return res;
  });
};

// Server-side initial load
const { data: selectedItem } = await useAsyncData(
  "libraryItem",
  () => fetchData(),
  {
    transform: (data) => data.hits.hits,
    // getCachedData: (key) => {
    //   return useNuxtApp().payload.data[key] || useNuxtApp().static.data[key];
    // },
  }
);

const pageIsLessThanOne = computed(() => {
  return +page_num.value <= 1;
});
const pageIsBiggerThanTotal = computed(() => {
  const page_count = volumeInfo.value?.page_count;
  return +page_num.value + 1 >= page_count;
});

const goToTheLibrary = (type: string) => {
  router.push({
    name: "hadithaLibrary",
  });
};
const onOpenList = () => {
  isModalOpen.value = true;
};
const onSearch = () => {
  router.push({
    name: "hadithaSearch",
  });
};
const onClose = () => {
  router.push({
    name: "hadithLibrary",
  });
};

const handlePagination = (
  prevNextIndicator: number,
  userEnteredPage: number | undefined = undefined
) => {
  if (loading.value) return;
  loading.value = true;

  const volId = route.params.id;
  const page_count = volumeInfo.value?.page_count;

  const isPageBiggerThanOne = +page_num.value + prevNextIndicator > 0;
  const isPageLessThanTotal = +page_num.value + prevNextIndicator < page_count;

  if (!(isPageBiggerThanOne && isPageLessThanTotal)) return;

  let url = repoUrl() + hadithaApi.library.prevNextHadith;
  url = url.replace("@index_key", "dhparag");
  url = url.replace("@vol_id", volId);
  url = url.replace(
    "@page_num",
    (userEnteredPage ?? page_num.value).toString()
  );
  url = url.replace("@step", prevNextIndicator.toString());

  // اگر کاربر شماره صفحه ای را وارد نکرده باشد..
  if (!userEnteredPage) page_num.value = +page_num.value + prevNextIndicator;

  httpService
    .getRequest(url)
    .then((res: HadithResponseModel) => {
      selectedItem.value = res.hits.hits;
    })
    .finally(() => {
      loading.value = false;
    });
};
const handlePageChange = () => {
  handlePagination(1, +page_num.value);
};

const getDataTree = () => {
  const volId = route.params.id;

  let url = repoUrl() + hadithaApi.search.getDataTree;
  url = url.replace("@appname", "monir");
  url = url.replace("@offset", 0);
  url = url.replace("@limit", 10000);
  url = url.replace("@vol_id", volId);
  url = url.replace("@q", "none");

  httpService.getRequest(url).then((res) => {
    state.treeItems = prepareTreeData(res.hits.hits);
  });
};

const prepareTreeData = (data) => {
  return data.map((item) => {
    const res = {
      ...item,
      ...item._source,
      title: item._source.content,
    };
    delete res._source;
    return res;
  });
};

// getDataTree();

// #endregion methods

// components declaration
const HadithaLayout = defineAsyncComponent(
  () => import("@haditha/layouts/HadithaLayout.vue")
);
const UTree = defineAsyncComponent(
  () => import("@haditha/components/haditha/library-show/UTree.vue")
);
const NavigationMenu = defineAsyncComponent(
  () => import("@haditha/components/haditha/NavigationMenu.vue")
);
// const AccordionMenu = defineAsyncComponent(
//   () => import("@haditha/components/haditha/library-show/AccordionMenu..vue")
// );
</script>

<template>
  <HadithaLayout>
    <div class="page-container h-full">
      <UContainer
        ui="{
          base: 'sm:px-6 lg:px-4 ',
        }"
        class="page-inner-container sm:px-6 lg:px-4"
      >
        <navigation-menu></navigation-menu>

        <div class="page-header py-4 flex justify-between items-center">
          <div class="flex items-center">
            <UButton
              class="menu p-1 me-8"
              @click="onOpenList"
              icon="i-lucide-menu"
              variant=""
            />

            <h1 class="m-0 title">
              {{ route.params.slug }}
            </h1>
          </div>

          <div class="flex items-center">
            <UButton
              @click="onSearch"
              class="my-trailing-button search p-0 close-btn text-[var(--ui-color-two)] hover:bg-gray-300"
              icon="i-lucide-search"
              variant=""
              size="xl"
            >
            </UButton>

            <UButton
              @click="goToTheLibrary"
              class="my-trailing-button close p-0 ms-8 close-btn text-[var(--ui-color-two)] hover:bg-gray-300"
              icon="i-lucide:x"
              variant=""
              size="xl"
            >
            </UButton>
          </div>
        </div>
        <div class="separator"></div>

        <div class="page-content firefox-scrollbar py-14 p-2">
          <p
            v-for="(parag, index) in selectedItem"
            :key="index"
            v-html="parag?._source?.content"
          ></p>
        </div>

        <div class="body-footer">
          <div class="mt-5 pb-5 z-2">
            <div class="flex justify-between pagination">
              <UButton
                @click="handlePagination(-1)"
                class="prev-haditha"
                label="صفحه قبل"
                color=""
                variant="soft"
                icon="i-haditha-chevron-right"
                :disabled="pageIsLessThanOne"
              />
              <div class="flex items-center">
                <span class="total-pages">{{ volumeInfo?.page_count }}</span>
                <span class="mx-2">/</span>
                <UInput
                  :disabled="loading"
                  color="neutral"
                  variant="outline"
                  v-model="page_num"
                  @change="handlePageChange"
                  :ui="{
                    root: 'root ',
                    base: 'base page-number-input',
                    leading: 'leading',
                    leadingIcon: 'leadingIcon',
                    leadingAvatar: 'leadingAvatar',
                    leadingAvatarSize: 'leadingAvatarSize',
                    trailing: 'trailing',
                    trailingIcon: 'trailingIcon',
                  }"
                />
              </div>
              <UButton
                @click="handlePagination(1)"
                class="next-haditha"
                label="صفحه بعد"
                color=""
                variant="soft"
                trailing-icon="i-haditha-chevron-left"
                :disabled="pageIsBiggerThanTotal"
              />
            </div>
          </div>
        </div>
      </UContainer>
    </div>

    <UModal
      v-model:open="isModalOpen"
      :dismissible="false"
      :ui="{
        footer: 'modal-footer',
        overlay: 'modal-overlay',
        content: 'modal-content accordion-menu h-10',
        header: 'modal-header',
        body: 'modal-body',
        title: 'modal-title',
        description: 'modal-description',
        close: 'modal-close ring-[white]',
      }"
      title="فهرست"
      :close="{
        color: 'primary',
        variant: 'outline',
        class: 'rounded-full',
      }"
    >
      <!-- <template #header></template> -->
      <!-- <template #content></template> -->
      <template #body>
        <UTree :items="state.treeItems" />
        <!-- <accordion-menu @close="isModalOpen = !isModalOpen"></accordion-menu> -->
      </template>
      <!-- <template #footer></template> -->
    </UModal>
  </HadithaLayout>
</template>

<style scoped>
.page-container {
  /* background: #f7fffd; */

  .page-inner-container {
    padding-top: 6em;
    /* position: relative; */
    /* padding-bottom: 4em; */
    width: 100%;
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
    .page-header {
      color: var(--ui-color-two);

      .menu {
        width: 24;
        height: 24;

        margin-left: 2.2em;
      }
      .title {
        /* font-family: IRANSansX; */
        font-family: var(--font);

        font-weight: 400;
        /* font-size: 16px; */
        font-size: 0.9rem;
        line-height: 20px;
        letter-spacing: 0%;
        text-align: right;

        /* Fallback color */
        color: #4d00ff;

        /* Gradient background */
        background: linear-gradient(268.94deg, #d284ff -0.65%, #4d00ff 104.59%);

        /* Clip the background to the text */
        background-clip: text;
        -webkit-background-clip: text; /* For Safari */

        /* Make the text transparent */
        color: transparent;
        -webkit-text-fill-color: transparent; /* For Safari */
      }
    }
    .separator {
      /* border: 0.5px solid #eee; */
      height: 1px;
      background-position: center center;
      background-size: contain;

      background-image: linear-gradient(
        90deg,
        #ffffff 0%,
        #a0f5ff 30.4%,
        #3fc9fa 71.47%,
        #a7ffe7 100%
      );
    }
    .page-content {
      padding-bottom: 5em;
      /* margin: 1.5em; */

      /* font-family: var(--ar-font); */
      font-family: var(--font);
      font-weight: 400;
      /* font-size: 20px; */
      font-size: 0.9rem;
      line-height: 40px;
      letter-spacing: 0%;
      text-align: right;

      color: var(--ui-color-two);

      /* height: calc(100dvh - 13em); */
      /* overflow-y: auto; */
    }

    .body-footer {
      position: fixed;
      bottom: 0em;
      left: 0;
      right: 0;
      max-width: 1200px;
      margin: auto;

      .actions {
        margin-bottom: 1em;

        .similar-btn {
          width: 114;
          height: 56;
          gap: 8px;
          border-radius: 12px;
          border-width: 0.5px;
          padding-top: 8px;
          padding-right: 20px;
          padding-bottom: 8px;
          padding-left: 24px;
          background: #ffffff;
          border: 0.5px solid;

          border-image-source: linear-gradient(
            102.02deg,
            #4be8ae 7.38%,
            #00a762 91.78%
          );
          box-shadow: 0px 8px 20px 0px #0000001a;

          font-family: var(--font);
          font-weight: 400;
          font-size: 15px;
          line-height: 22.5px;
          letter-spacing: 0%;
          text-align: right;
          color: var(--ui-color-two);
        }
        .explore-btn {
          width: 118;
          height: 56;
          gap: 4px;
          border-radius: 12px;
          padding-top: 8px;
          padding-right: 24px;
          padding-bottom: 8px;
          padding-left: 20px;
          background: linear-gradient(
            268.94deg,
            #d284ff -0.65%,
            #4d00ff 104.59%
          );
          box-shadow: 0px 8px 20px 0px #0000001a;

          font-family: var(--font);
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          letter-spacing: 0%;
          text-align: right;
          color: #fff;
        }
      }
      .pagination {
        padding: 0.7em 0px;

        /* width: 672; */
        /* height: 56; */
        justify-content: space-between;
        border-radius: 16px;
        border-width: 0.3px;
        padding-right: 32px;
        padding-left: 32px;
        background: #ffffff;
        border: 0.3px solid #e0e0e0;
        box-shadow: 0px 8px 20px 0px #0000001a;

        .total-pages {
          font-family: var(--font);
          font-weight: 400;
          font-size: 12px;
          line-height: 100%;
          letter-spacing: 0%;
          text-align: right;
          color: #8a92a8;
        }
        .prev-haditha {
          font-family: var(--font);
          font-weight: 300;
          font-size: 0.6rem;
          line-height: 20px;
          letter-spacing: 0%;
          text-align: right;
          color: var(--ui-color-two);
        }
        .next-haditha {
          font-family: var(--font);
          font-weight: 300;
          /* font-size: 12px; */
          font-size: 0.6rem;
          line-height: 20px;
          letter-spacing: 0%;
          text-align: right;
          color: var(--ui-color-two);
        }

        .prev-haditha,
        .next-haditha {
          &:hover {
            cursor: pointer;
            background-color: #eee;
          }

          &:disabled {
            cursor: not-allowed;
          }
        }
      }
    }
  }
}
</style>

<style>
body.hadith-system.library-show-page {
  background-color: #f7fffd;
}
.page-container {
  .page-inner-container {
    .body-footer {
      .pagination {
        .page-number-input {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 4em /*36px*/;
          height: 3em /*36px*/;
          gap: 4px;
          border-radius: 12px;
          border-width: 0.5px;
          border: 0.3px solid #e0e0e0;
          box-shadow: 0px 8px 20px 0px #0000001a;
          font-family: var(--font);
          font-weight: 400;
          font-size: 0.75rem;
          line-height: 100%;
          letter-spacing: 0%;
          text-align: center;
          color: #8a92a8;
        }
      }
    }
  }
}
</style>

<!-- http://localhost:3000/haditha/library/vdh9971/%D8%AA%D8%B1%D8%AC%D9%85%D9%87%20%D8%A7%D8%B5%D9%88%D9%84%20%DA%A9%D8%A7%D9%81%DB%8C%20%D8%AC%D9%84%D8%AF%20%D8%A7%D9%88%D9%84%D8%8C%20%D8%B5%D9%81%D8%AD%D9%87%0A%20%20%20384 -->
