<template>
  <div class="missionary-education">
    <BoxedIconTitleBlock
      class="missionary-education__heading"
      title="آموزش من"
      desc="ترم‌هایی که با موفقیت گذرانده‌اید را مشاهده کنید."
    >
      <template #icon>
        <SvgIcon name="graduation-cap" :size="24" color="var(--color-primary)" />
      </template>
    </BoxedIconTitleBlock>

    <SkeletonLoaderBlock v-if="isLoading" :rows="4" :cols-per-row="1" />
    <div v-else-if="terms.length > 0">
      <StudentTermItem
        v-for="enrollment in terms"
        :key="enrollment.id"
        :enrollment="enrollment"
        @show-details="onShowDetails"
      />
    </div>
    <NoItems v-else title="ترمی نیست" desc="هنوز ترمی را نگذرانده‌اید." />

    <PaginationBlock :pagination="meta" @update:page="setPage" />
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import SvgIcon from '@/components/icons/SvgIcon.vue'
import NoItems from '@/components/blocks/NoItems.vue'
import { usePagination } from '@/composables/usePagination'
import PaginationBlock from '@/components/blocks/PaginationBlock.vue'
import BoxedIconTitleBlock from '@/components/blocks/BoxedIconTitleBlock.vue'
import SkeletonLoaderBlock from '@/components/blocks/SkeletonLoaderBlock.vue'
import { useMissionaryPassedTermsQuery } from '@/services/query/missionary-education'
import StudentTermItem from '@/features/student/terms/components/StudentTermItem.vue'

const router = useRouter()

const { pagination, setPage } = usePagination({ page: 1, perPage: 20 })

const { data, isLoading } = useMissionaryPassedTermsQuery(pagination, { keepPreviousData: true })

const terms = computed(() => data.value?.data ?? [])
const meta = computed(() => ({
  page: pagination.value.page,
  perPage: pagination.value.perPage,
  ...data.value?.meta,
}))

const onShowDetails = (enrollment) => {
  router
    .push({ name: 'missionary-education-term', params: { id: enrollment?.term?.id } })
    .catch(() => {})
}
</script>

<style lang="scss" scoped>
.missionary-education {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;

  &__heading {
    margin-bottom: 0.75rem;
  }
}
</style>
