<template>
  <div v-if="visiblePages.length > 1" class="pagination">
    <button
      type="button"
      :disabled="isFirstPage"
      class="pagination__nav"
      :class="{ 'pagination__nav--disabled': isFirstPage }"
      @click="changePage(currentPage - 1)"
    >
      <SvgIcon name="caret-left" :size="12" />
      قبلی
    </button>
    <ul class="pagination__list">
      <li v-for="page in visiblePages" :key="page">
        <button
          type="button"
          class="pagination__page"
          :class="{ 'pagination__page--active': page === currentPage }"
          @click="changePage(page)"
        >
          {{ page }}
        </button>
      </li>
    </ul>
    <button
      type="button"
      :disabled="isLastPage"
      class="pagination__nav"
      :class="{ 'pagination__nav--disabled': isLastPage }"
      @click="changePage(currentPage + 1)"
    >
      بعدی
      <SvgIcon name="caret-right" :size="12" />
    </button>
  </div>
</template>

<script setup>
import { computed } from 'vue'

import SvgIcon from '@/components/icons/SvgIcon.vue'

const props = defineProps({
  pagination: { type: Object, required: true },
})

const emit = defineEmits(['update:page', 'change'])

const currentPage = computed(() => props.pagination.page || 1)
const totalPages = computed(() => props.pagination.lastPage || props.pagination.last_page || 1)

const isFirstPage = computed(() => currentPage.value === 1)
const isLastPage = computed(() => currentPage.value === totalPages.value)

const visiblePages = computed(() => {
  const total = totalPages.value
  const current = currentPage.value
  const range = 2
  let start = Math.max(1, current - range)
  let end = Math.min(total, current + range)
  if (start > 1) start = start === 2 ? 1 : start
  if (end < total) end = end === total - 1 ? total : end
  const pages = []
  for (let i = start; i <= end; i += 1) pages.push(i)
  return pages
})

const changePage = (page) => {
  if (page < 1 || page > totalPages.value) return
  emit('update:page', page)
  emit('change', page)
}
</script>

<style lang="scss" scoped>
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  direction: ltr;

  &__nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border: none;
    background: #e9e9e9;
    border-radius: 0.375rem;
    font-family: var(--font-family-fa);
    cursor: pointer;

    &--disabled {
      background: transparent;
      color: #d1d5db;
      cursor: not-allowed;
    }
  }

  &__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0.625rem;
  }

  &__page {
    height: 1.5rem;
    width: 1.5rem;
    line-height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 0.375rem;
    font-family: var(--font-family-number-fa);
    font-size: 0.875rem;
    cursor: pointer;

    &--active {
      background: #e9e9e9;
    }
  }
}
</style>
