<script setup lang="ts">
import hadithaApi from "@haditha/apis/hadithaApi";

const props = defineProps({
  selectedItem: {
    type: Object,
    default() {
      return {};
    },
  },
});

const emit = defineEmits(["close"]);
let hadithItem = ref();
const route = useRoute();
const router = useRouter();
const loading = ref(false);
const httpService = useNuxtApp()["$http"];
const toast = useToast();

hadithItem.value = props.selectedItem;

const hadithAddress = computed(() => {
  return `${hadithItem.value?._source?.address?.vol_title}، صفحه
   ${hadithItem.value?._source?.address?.page_num}`;
});

// const open = ref(false);
const closeModal = () => {
  emit("close");
};

const goToTheSearch = () => {
  emit("on-search-similar", hadithItem.value);
};
const goToTheChatbot = () => {
  router.push({
    name: "hadithaChatBot",
  });
};

const handleFavorite = async () => {
  if (hadithItem.value?._source?.tbookmark) {
    await removeFromFavorites(hadithItem.value);
    hadithItem.value._source.tbookmark = false;
  } else {
    await addToFavorites(hadithItem.value);
    hadithItem.value._source.tbookmark = true;
  }
};

const addToFavorites = async (item = {}) => {
  let url = repoUrl() + hadithaApi.favorite.add;
  url = url.replace("{{data_type}}", "bookmark");
  url = url.replace("{{ref_key}}", "dhparag");
  const formData = {
    ref_id: item._id,
    title: item._source.content,
  };
  httpService
    .postRequest(url, formData)
    .then((res) => {
      toast.add({
        title: "انجام شد.",
        description: "به نشان شده ها افزوده شد",
        color: "success",
      });
    })
    .catch((err) => {
      toast.add({
        title: "خطا",
        description: "خطایی رخ داد.لطفا دوباره امتحان کنید.",
        color: "error",
      });
    });
};

const removeFromFavorites = async (item = {}, index = 0) => {
  let url = repoUrl() + hadithaApi.favorite.deleteByRefid;
  url = url.replace("{{data_type}}", "bookmark");
  url = url.replace("{{index_key}}", "dhparag");
  url = url.replace("{{ref_id}}", item._id);

  const formData = {
    ref_id: item._id,
    title: item._source.title,
  };
  httpService
    .postRequest(url, formData)
    .then((res) => {
      toast.add({
        title: "انجام شد.",
        description: "به نشان شده ها افزوده شد",
        color: "success",
      });
    })
    .catch((err) => {
      toast.add({
        title: "خطا",
        description: "خطایی رخ داد.لطفا دوباره امتحان کنید.",
        color: "error",
      });
    });
};

const handlePagination = (prevNextIndicator: string) => {
  if (loading.value) return;
  loading.value = true;

  let url = repoUrl() + hadithaApi.search.prevNextHadith;
  url = url.replace("@index_key", "dhparag");
  url = url.replace("@vol_id", hadithItem.value?._source?.address?.vol_id);
  url = url.replace("@parag_order", hadithItem.value?._source?.parag_order);
  url = url.replace("@step", prevNextIndicator);

  httpService
    .getRequest(url)
    .then((res) => {
      hadithItem.value = res.hits.hits?.[0];
    })
    .finally(() => (loading.value = false));
};

const onKeyWordClick = (keyword) => {
  // router.push({
  //   name: "hadithaSearch",
  //   query: {
  //     q:  query.q ?? "",
  //     f_aik: keyword ?? "",
  //   },
  // });
};
const onClassClick = (aiclass) => {
  // router.push({
  //   name: "hadithaSearch",
  //   query: {
  //     q: route.query.q ?? "",
  //     f_aik: aiclass ?? "",
  //   },
  // });
};
// const localCopyTextToClipboard = (text: string) => {
//   copyTextToClipboard(text);
// };
// #endregion methods

const showArabicText = computed(() => {
  return hadithItem.value?._source?.content_ar?.length;
});
const showPersianText = computed(() => {
  return hadithItem.value?._source?.content?.length;
});
const showDescriptionText = computed(() => {
  return hadithItem.value?._source?.description?.length;
});
const showKewrodAndClassesText = computed(() => {
  return (
    hadithItem.value?._source?.ai_keywords?.length ||
    hadithItem.value?._source?.ai_classes?.length
  );
});
</script>

<template>
  <div class="search-show-modal">
    <div class="body-header">
      <span class="top-left-bgi z-0"></span>
      <div class="modal-title flex justify-between">
        <img
          fit="auto"
          quality="80"
          placeholder
          src="/img/haditha/haditha-title.svg"
        />

        <UButton
          icon="i-haditha-close"
          color="neutral"
          variant="ghost"
          class="close-btn"
          @click="closeModal"
        />
      </div>
    </div>

    <div class="body-content">
      <div class="h-full flex flex-col justify-center z-2">
        <div class="bg-container">
          <div class="header flex">
            <UButton
              @click="handleFavorite"
              :variant="hadithItem?._source?.tbookmark ? 'soft' : 'ghost'"
              color="primary"
              class="bookmark-btn"
              :icon="
                hadithItem?._source?.tbookmark
                  ? 'i-haditha-tag-active'
                  : 'i-haditha-tag'
              "
            >
            </UButton>

            <ULink
              :to="{
                name: 'hadithaLibraryShow',
                params: {
                  id: hadithItem?._source?.address.vol_id,
                  slug: hadithAddress,
                },
                query: {
                  page_num: hadithItem?._source?.address?.page_num,
                },
              }"
              color="neutral"
              variant="ghost"
              :ui="{
                leadingIcon: 'text-(--ui-primary)',
              }"
              class="referene bg-white hover:bg-gray-100"
            >
              <span> نشانی: </span>
              {{ hadithAddress ?? "" }}
            </ULink>
          </div>

          <div class="content firefox-scrollbar">
            <div class="search-item">
              <template v-if="showArabicText">
                <div class="text-arabic-section">
                  <div class="section-header">
                    <span class="section-title">
                      {{
                        hadithItem?._source?.meta?.hadith_masoum ??
                        hadithItem?._source?.meta?.hadith_sanad
                      }}
                    </span>

                    <UButton
                      v-if="
                        hadithItem?._source?.meta?.hadith_masoum?.length ||
                        hadithItem?._source?.meta?.hadith_sanad
                      "
                      @click="
                        copyTextToClipboard(
                          hadithItem?._source?.content_ar ?? ''
                        )
                      "
                      variant="ghost"
                      class="copy-btn"
                      label="کپی"
                    />
                  </div>
                  <div
                    v-if="hadithItem?._source?.content_ar?.length"
                    class="arabic-text"
                  >
                    <p>
                      {{ hadithItem?._source?.content_ar ?? "" }}
                    </p>
                  </div>
                </div>

                <div class="separator"></div>
              </template>
              <template v-if="showPersianText">
                <div class="text-persian-section">
                  <div class="section-header">
                    <span class="section-title"> ترجمه </span>
                    <UButton
                      @click="copyTextToClipboard(hadithItem?._source?.content)"
                      variant="ghost"
                      class="copy-btn"
                      label="کپی"
                    />
                  </div>

                  <p
                    class="from"
                    v-if="
                      hadithItem?._source?.meta?.hadith_masoum ||
                      hadithItem?._source?.meta?.hadith_sanad
                    "
                  >
                    {{
                      hadithItem?._source?.meta?.hadith_masoum ??
                      hadithItem?._source?.meta?.hadith_sanad
                    }}:
                  </p>
                  <p
                    class="persian-text"
                    v-html="hadithItem?._source?.content"
                  ></p>
                </div>

                <div class="separator"></div>
              </template>

              <template v-if="showDescriptionText">
                <div
                  v-if="hadithItem?._source?.description?.length"
                  class="text-description-section"
                >
                  <div class="section-header">
                    <span class="section-title"> شرح </span>
                    <UButton
                      @click="
                        copyTextToClipboard(hadithItem?._source?.description)
                      "
                      variant="ghost"
                      class="copy-btn"
                      label="کپی"
                    />
                  </div>
                  <p
                    class="description-item"
                    v-html="hadithItem?._source?.description"
                  ></p>
                </div>

                <div class="separator"></div>
              </template>

              <template v-if="showKewrodAndClassesText">
                <div class="text-description-section">
                  <div
                    v-if="hadithItem?._source?.ai_keywords?.length"
                    class="mb-4"
                  >
                    <span class="text-sm"> کلیدواژگان: </span>
                    <UButton
                      class="me-1 text-sm"
                      v-for="(keyword, i) in hadithItem?._source?.ai_keywords"
                      :key="i"
                      @click.prevent="onKeyWordClick(keyword)"
                      variant="soft"
                    >
                      <!-- {{ i > 0 ? "," : "" }} -->
                      {{ keyword }}
                    </UButton>
                  </div>

                  <div v-if="hadithItem?._source?.ai_classes?.length">
                    <span class="text-sm"> دسته بندی ها: </span>
                    <UButton
                      class="me-1 text-sm"
                      v-for="(aiClass, i) in hadithItem?._source?.ai_classes"
                      :key="i"
                      @click.prevent="onClassClick(aiClass)"
                      variant="soft"
                    >
                      <!-- {{ i > 0 ? "," : "" }} -->
                      {{ aiClass.label }}
                    </UButton>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="body-footer">
      <div class="mt-5 z-2">
        <div class="flex justify-between actions">
          <UButton
            disabled
            class="similar-btn"
            icon="i-haditha-search-3"
            label="مشابه"
            color="neutral"
            variant="outline"
            @click.prevent="goToTheSearch()"
          />
          <UButton
            disabled
            class="explore-btn mr-8"
            trailing-icon="i-haditha-explore"
            label="کاوش"
            variant="solid"
            @click.prevent="goToTheChatbot()"
          />
        </div>
        <div class="flex justify-between pagination">
          <UButton
            @click="handlePagination('-1')"
            class="prev-haditha"
            label="حدیث قبل"
            color=""
            variant="soft"
            icon="i-haditha-chevron-right"
          />
          <UButton
            @click="handlePagination('1')"
            class="next-haditha"
            label="حدیث بعد"
            color=""
            variant="soft"
            trailing-icon="i-haditha-chevron-left"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<!-- because of the buttons, using without scoped. -->
<style>
.search-show-modal {
  .body-header {
    .modal-title {
      padding: 0 0.5em 1.5em;
      margin-bottom: 2.5em;

      .close-btn {
        color: var(--ui-color-two);

        /* width: 24px; */
        /* height: 24px; */
        padding: 0.2em;
        background-color: transparent;
      }
    }
  }
  .body-content {
    .header {
      .bookmark-btn {
        width: 49px;
        width: 49px;
        height: 32px;
        gap: 4px;
        border-radius: 6px;
        border-width: 0.5px;
        padding-top: 4px;
        padding-right: 12px;
        padding-bottom: 4px;
        padding-left: 12px;
        border: 0.5px solid #d9d9d9;
        /* background: #ffffff;  */
        display: flex;
        justify-content: center;
        align-items: center;

        /* span { */
        /* width: 19; */
        /* height: 21; */
        /* background: #29d985; */
        /* } */
      }

      .referene {
        margin-right: 0.5em;
        width: 182;
        height: 32;
        gap: 4px;
        border-radius: 6px;
        border-width: 0.5px;
        padding-top: 4px;
        padding-right: 12px;
        padding-bottom: 4px;
        padding-left: 12px;
        /* background-color: #ffffff; */
        border: 0.5px solid #d9d9d9;

        font-family: var(--font);
        font-weight: 300;
        font-size: 12px;
        line-height: 18px;
        letter-spacing: 0%;
        text-align: right;
        color: #8a92a8;
        display: flex;
        align-items: center;

        span {
          margin-left: 0.1em;
          font-family: var(--font);
          font-weight: 300;
          font-size: 12px;
          line-height: 18px;
          letter-spacing: 0%;
          text-align: right;
          color: #4d00ff;
        }
      }
    }
    .content {
      height: calc(100dvh - 29em);
      overflow-y: auto;

      .search-item {
        padding: 1em 0 1em 0.1em;

        .section-header {
          display: flex;
          justify-content: space-between;

          text-align: right;
          margin-bottom: 0.5em;

          .section-title {
            font-family: var(--font);
            font-weight: 400;
            font-size: 14px;
            line-height: 21px;
            letter-spacing: 0%;
            text-align: right;

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

            /* Gradient background */
            background-image: linear-gradient(
              102.02deg,
              #4be8ae 7.38%,
              #00a762 91.78%
            );

            /* 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 */
          }

          .copy-btn {
            padding: 0.2em 1em;

            /* width: 44px; */
            /* height: 24px; */
            gap: 4px;
            border-radius: 6px;
            /* border-width: 0.5px; */
            padding-top: 4px;
            padding-right: 12px;
            padding-bottom: 4px;
            padding-left: 12px;
            /* background: #ffffff; */
            border: 0.5px solid #d9d9d9;

            font-family: var(--font);
            font-weight: 300;
            font-size: 12px;
            line-height: 18px;
            letter-spacing: 0%;
            text-align: right;

            color: #8a92a8;
          }
        }
        .text-arabic-section {
          padding: 2em 0;

          .arabic-text {
            font-family: var(--ar-font);
            font-weight: 400;
            font-size: 18px;
            line-height: 32px;
            letter-spacing: 0%;
            text-align: right;
            color: var(--ui-color-two);

            margin-bottom: 0.5em;
          }
        }

        .text-persian-section {
          padding: 2em 0;

          .section-header {
          }

          .from,
          .persian-text {
            /* font-family: Takrim; */
            font-family: var(--font);
            font-weight: 400;
            /* font-size: 18px; */
            font-size: 0.85rem;
            line-height: 30px;
            letter-spacing: 0%;
            text-align: right;
            color: var(--ui-color-two);
          }
          /* .persian-text {
        font-family: var(--ar-font);
            font-weight: 400;
            font-size: 16px;
            line-height: 22px;
            letter-spacing: 0%;
            text-align: right;
            color: #626b84;
            margin-bottom: 0.5em;
          } */
        }
        .text-description-section {
          padding: 2em 0;

          .description-item {
            font-family: var(--font);
            font-weight: 400;
            /* font-size: 18px; */
            font-size: 0.85rem;

            line-height: 30px;
            letter-spacing: 0%;
            text-align: right;
            color: var(--ui-color-two);

            /*             
            height: 24px;
            gap: 4px;
            padding-top: 4px;
            padding-right: 8px;
            padding-bottom: 4px;
            padding-left: 8px;
            border-radius: 6px;
            border-width: 0.5px;
            border: 0.5px solid #d9d9d9;

            font-family: var(--font);
            font-weight: 300;
            font-size: 10px;
            line-height: 15px;
            letter-spacing: 0%;
            text-align: right;
            color: #8a92a8; */
          }
        }

        .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%
          );
        }
      }
    }
  }
  .body-footer {
    .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;

      .prev-haditha {
        font-family: var(--font);
        font-weight: 300;
        font-size: 12px;
        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;
        line-height: 20px;
        letter-spacing: 0%;
        text-align: right;
        color: var(--ui-color-two);
      }
    }
  }
}
</style>
