<script>
import theme from "#build/b24ui/pagination";
</script>

<script setup>
import { computed } from "vue";
import { PaginationRoot, PaginationList, PaginationListItem, PaginationFirst, PaginationPrev, PaginationEllipsis, PaginationNext, PaginationLast, useForwardPropsEmits } from "reka-ui";
import { reactivePick } from "@vueuse/core";
import { useAppConfig } from "#imports";
import { useLocale } from "../composables/useLocale";
import { tv } from "../utils/tv";
import icons from "../dictionary/icons";
import B24Button from "./Button.vue";
const props = defineProps({
  as: { type: null, required: false },
  firstIcon: { type: [Function, Object], required: false },
  prevIcon: { type: [Function, Object], required: false },
  nextIcon: { type: [Function, Object], required: false },
  lastIcon: { type: [Function, Object], required: false },
  ellipsisIcon: { type: [Function, Object], required: false },
  color: { type: null, required: false, default: "air-secondary-no-accent" },
  activeColor: { type: null, required: false, default: "air-primary" },
  showControls: { type: Boolean, required: false, default: true },
  size: { type: null, required: false },
  to: { type: Function, required: false },
  class: { type: null, required: false },
  b24ui: { type: null, required: false },
  defaultPage: { type: Number, required: false },
  disabled: { type: Boolean, required: false },
  itemsPerPage: { type: Number, required: false, default: 10 },
  page: { type: Number, required: false },
  showEdges: { type: Boolean, required: false, default: false },
  siblingCount: { type: Number, required: false, default: 2 },
  total: { type: Number, required: false, default: 0 }
});
const emits = defineEmits(["update:page"]);
const slots = defineSlots();
const { dir } = useLocale();
const appConfig = useAppConfig();
const rootProps = useForwardPropsEmits(reactivePick(props, "as", "defaultPage", "disabled", "itemsPerPage", "page", "showEdges", "siblingCount", "total"), emits);
const firstIcon = computed(() => props.firstIcon || (dir.value === "rtl" ? icons.chevronDoubleRight : icons.chevronDoubleLeft));
const prevIcon = computed(() => props.prevIcon || (dir.value === "rtl" ? icons.chevronRight : icons.chevronLeft));
const nextIcon = computed(() => props.nextIcon || (dir.value === "rtl" ? icons.chevronLeft : icons.chevronRight));
const lastIcon = computed(() => props.lastIcon || (dir.value === "rtl" ? icons.chevronDoubleLeft : icons.chevronDoubleRight));
const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.pagination || {} })());
</script>

<template>
  <PaginationRoot v-slot="{ page, pageCount }" v-bind="rootProps" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
    <PaginationList v-slot="{ items }" data-slot="list" :class="b24ui.list({ class: props.b24ui?.list })">
      <PaginationFirst v-if="showControls || !!slots.first" as-child data-slot="first" :class="b24ui.first({ class: props.b24ui?.first })">
        <slot name="first">
          <B24Button :color="color" :size="size" :icon="firstIcon" :to="to?.(1)" />
        </slot>
      </PaginationFirst>
      <PaginationPrev v-if="showControls || !!slots.prev" as-child data-slot="prev" :class="b24ui.prev({ class: props.b24ui?.prev })">
        <slot name="prev">
          <B24Button :color="color" :size="size" :icon="prevIcon" :to="page > 1 ? to?.(page - 1) : void 0" />
        </slot>
      </PaginationPrev>

      <template v-for="(item, index) in items" :key="index">
        <PaginationListItem v-if="item.type === 'page'" as-child :value="item.value" data-slot="item" :class="b24ui.item({ class: props.b24ui?.item })">
          <slot name="item" v-bind="{ item, index, page, pageCount }">
            <B24Button
              :color="page === item.value ? activeColor : color"
              :size="size"
              :label="String(item.value)"
              :b24ui="{ label: b24ui.label() }"
              :to="to?.(item.value)"
              square
            />
          </slot>
        </PaginationListItem>

        <PaginationEllipsis v-else as-child data-slot="ellipsis" :class="b24ui.ellipsis({ class: props.b24ui?.ellipsis })">
          <slot name="ellipsis" :b24ui="b24ui">
            <B24Button as="div" :color="color" :size="size" :icon="ellipsisIcon || icons.ellipsis" />
          </slot>
        </PaginationEllipsis>
      </template>

      <PaginationNext v-if="showControls || !!slots.next" as-child data-slot="next" :class="b24ui.next({ class: props.b24ui?.next })">
        <slot name="next">
          <B24Button :color="color" :size="size" :icon="nextIcon" :to="page < pageCount ? to?.(page + 1) : void 0" />
        </slot>
      </PaginationNext>
      <PaginationLast v-if="showControls || !!slots.last" as-child data-slot="last" :class="b24ui.last({ class: props.b24ui?.last })">
        <slot name="last">
          <B24Button :color="color" :size="size" :icon="lastIcon" :to="to?.(pageCount)" />
        </slot>
      </PaginationLast>
    </PaginationList>
  </PaginationRoot>
</template>
