<template>
  <v-skeleton-loader
    v-if="isEmpty(publicBlogPosts) && isLoading"
    type="list-item-three-line"
  />
  <v-empty-state
    v-else-if="isEmpty(publicBlogPosts) && !isLoading"
    text="No blog posts found."
  />
  <template v-else>
    <BlogPostListItemCard
      v-for="blogPost in publicBlogPosts"
      :key="blogPost.id"
      :blog-post="blogPost"
    />
  </template>
  <EnhancedPagination
    v-model="page"
    v-model:per-page="perPage"
    :total-count="totalCount"
  />
</template>

<script setup lang="ts">
import { computed } from "vue"
import { isEmpty } from "lodash"

import useRouteQueryPagination from "@/use/utils/use-route-query-pagination"
import usePublicBlogPosts, {
  type PublicBlogPostFiltersOptions,
  type PublicBlogPostQueryOptions,
  type PublicBlogPostWhereOptions,
} from "@/use/use-public-blog-posts"

import EnhancedPagination from "@/components/common/EnhancedPagination.vue"
import BlogPostListItemCard from "@/components/blog-posts/BlogPostListItemCard.vue"

const props = withDefaults(
  defineProps<{
    filters?: PublicBlogPostFiltersOptions
    where?: PublicBlogPostWhereOptions
    routeQuerySuffix?: string
    waiting?: boolean
  }>(),
  {
    filters: () => ({}),
    where: () => ({}),
    routeQuerySuffix: "BlogPosts",
    waiting: false,
  }
)

const { page, perPage } = useRouteQueryPagination({ routeQuerySuffix: props.routeQuerySuffix })
const blogPostQueryOptions = computed<PublicBlogPostQueryOptions>(() => ({
  where: props.where,
  filters: props.filters,
  page: page.value,
  perPage: perPage.value,
}))

const { publicBlogPosts, totalCount, isLoading, refresh } = usePublicBlogPosts(
  blogPostQueryOptions,
  { skipWatchIf: () => props.waiting }
)

defineExpose({ refresh })
</script>
