<script lang="ts" setup>
import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/vue/24/outline";
import { MoreHorizontal } from "lucide-vue-next";

import { Button } from "@/components/ui/button";
import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationNext,
  PaginationPrevious
} from "@/components/ui/pagination";

import type { PaginationProps } from "./type";

const props = withDefaults(defineProps<PaginationProps & { load: boolean }>(), {
  total: 0,
  pageSize: 5,
  currentPage: 1
});

const emits = defineEmits<{
  "update:page": [page: number];
}>();

const pageCount = computed(() => Math.ceil(props.total / props.pageSize));
</script>

<template>
  <!-- 分页器 -->
  <Pagination
    v-slot="{ page }"
    :page="props.currentPage"
    :items-per-page="props.pageSize"
    :total="props.total"
    :show-edges="true"
    :disabled="props.load || pageCount <= 1"
    class="select-none"
    :class="`justify-${props.align || 'center'}`"
    @update:page="(val: number) => emits('update:page', val)"
  >
    <PaginationContent v-slot="{ items }">
      <PaginationPrevious class="w-5.5 h-5.5 text-primary!">
        <ChevronLeftIcon class="size-4" />
      </PaginationPrevious>
      <template v-for="(item, index) in items" :key="index">
        <PaginationItem
          v-if="item.type === 'page'"
          :value="item.value"
          :is-active="item.value === page"
          class="w-fit min-w-5.5 h-5.5 text-xs px-1 text-muted-foreground"
          :class="{
            'text-primary! border-primary!': item.value === page
          }"
        >
          {{ item.value }}
        </PaginationItem>
        <PaginationEllipsis
          v-else-if="item.type === 'ellipsis'"
          class="text-muted-foreground"
        >
          <Button
            variant="outline"
            :disabled="props.load"
            class="w-5.5 h-5.5 rounded-2xl border-transparent bg-background p-0 text-[12px] text-muted-foreground"
          >
            <MoreHorizontal class="size-4" />
          </Button>
        </PaginationEllipsis>
      </template>
      <PaginationNext class="w-5.5 h-5.5 text-primary!">
        <ChevronRightIcon class="size-4" />
      </PaginationNext>
    </PaginationContent>
  </Pagination>
</template>
