<script setup lang="ts">
import { useRoute } from "vue-router";
import { useBlogsQuery } from "~/queries/blogs";
import type { BlogsResponse } from "~/types/blogCard";

const route = useRoute();

const currentPage = computed(() => Number(route.query.page) || 1);

const blogsQuery = useBlogsQuery(currentPage);
const blogs = computed(() => blogsQuery.data.value || ({} as BlogsResponse));
const status = computed(() => blogsQuery.status.value);

watch(
  () => route.query.page,
  () => {
    const blogsSection = document.getElementById("blogs");
    if (blogsSection) {
      blogsSection.scrollIntoView({ behavior: "smooth" });
    }
  },
);
</script>

<template>
  <section id="blogs" class="bg-gradient-odd py-section px-4">
    <BlogsTitle
      :title="$t('blogs-main-section.title')"
      :description="$t('blogs-main-section.description')"
      custom-style="!gap-1"
      title-heading="h2"
    />
    <Spacer />

    <!-- Loading state -->
    <div
      v-if="status === 'pending'"
      class="container mx-auto grid grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-3"
    >
      <SkeletonsBlogCardSkeleton v-for="i in 6" :key="i" />
    </div>

    <!-- Blogs -->
    <div
      v-else-if="blogsQuery.data && blogs?.data?.length > 0"
      class="container mx-auto grid grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-3"
    >
      <BlogsBlogCard
        v-for="blog in blogs?.data"
        :id="blog.id"
        :key="blog.id"
        :slug="blog.slug"
        :title="blog.title"
        :tag="blog.tag"
        :description="blog.description"
        :image="blog.image"
      />
    </div>

    <!-- Empty -->
    <div v-else class="container mx-auto flex items-center justify-center">
      <EmptyState />
    </div>

    <!-- Pagination -->
    <div
      v-if="blogs?.meta?.last_page > 1"
      class="mt-8 flex items-center justify-center gap-2"
    >
      <NuxtLinkLocale
        class="mx-2 cursor-pointer disabled:opacity-50"
        :to="{
          query: currentPage > 2 ? { page: String(currentPage - 1) } : {},
        }"
        :aria-disabled="currentPage === 1"
      >
        <SvgArrowRightIcon class="hidden h-5 w-5 rtl:block" />
        <SvgArrowLeftIcon class="h-5 w-5 rtl:hidden" />
      </NuxtLinkLocale>

      <NuxtLinkLocale
        v-for="page in blogs?.meta?.last_page"
        :key="page"
        class="w-9 cursor-pointer !rounded-sm px-3 py-1 text-center"
        :class="
          page === currentPage
            ? 'hover:bg-accent/90 border-surface-border ws-gradient-border border-1 bg-transparent shadow-xs'
            : 'text-primary underline-offset-4 hover:underline'
        "
        :to="{ query: page === 1 ? {} : { page: String(page) } }"
      >
        {{ page }}
      </NuxtLinkLocale>

      <NuxtLinkLocale
        class="mx-2 cursor-pointer disabled:opacity-50"
        :to="{
          query:
            currentPage < blogs?.meta?.last_page
              ? { page: String(currentPage + 1) }
              : { page: String(currentPage) },
        }"
        :aria-disabled="currentPage === blogs?.meta?.last_page"
      >
        <SvgArrowLeftIcon class="hidden h-5 w-5 rtl:block" />
        <SvgArrowRightIcon class="h-5 w-5 rtl:hidden" />
      </NuxtLinkLocale>
    </div>

    <Spacer />
    <SubscribeSection />
  </section>
</template>
