<script setup lang="ts" generic="TData">
import { UiButton } from '@/components/UiButton';
import { UiIcon } from '@/components/UiIcon';
import {
  UiDropdownMenu,
  UiDropdownMenuContent,
  UiDropdownMenuItem,
  UiDropdownMenuTrigger,
} from '@/components/UiDropdownMenu';
import { DATA_TABLE_LABELS } from './constants';
import type { UiDataTablePaginationProps } from './types';
import { computed } from 'vue';

defineOptions({
  name: 'UiDataTablePagination',
});

const props = withDefaults(defineProps<UiDataTablePaginationProps<TData>>(), {
  pageSizeOptions: () => [10, 20, 30, 50],
  showPageSize: true,
  showSelection: true,
  labels: undefined,
});

const labels = computed(() => ({
  rowsPerPage: props.labels?.rowsPerPage ?? DATA_TABLE_LABELS.rowsPerPage,
  goToFirstPage: props.labels?.goToFirstPage ?? DATA_TABLE_LABELS.goToFirstPage,
  goToPreviousPage:
    props.labels?.goToPreviousPage ?? DATA_TABLE_LABELS.goToPreviousPage,
  goToNextPage: props.labels?.goToNextPage ?? DATA_TABLE_LABELS.goToNextPage,
  goToLastPage: props.labels?.goToLastPage ?? DATA_TABLE_LABELS.goToLastPage,
  pageOf: props.labels?.pageOf ?? DATA_TABLE_LABELS.pageOf,
  rowsSelected: props.labels?.rowsSelected ?? DATA_TABLE_LABELS.rowsSelected,
}));
</script>

<template>
  <div class="flex items-center gap-2 justify-between px-2">
    <div
      v-if="showSelection"
      class="flex-1 body-14-regular text-muted-foreground"
    >
      {{
        labels.rowsSelected(
          table.getFilteredSelectedRowModel().rows.length,
          table.getFilteredRowModel().rows.length,
        )
      }}
    </div>
    <div v-else class="flex-1" />
    <div class="flex items-center gap-x-6 lg:gap-x-8">
      <div v-if="showPageSize" class="flex items-center gap-x-2">
        <p id="rows-per-page-label" class="body-14-medium">
          {{ labels.rowsPerPage }}
        </p>
        <UiDropdownMenu>
          <UiDropdownMenuTrigger as-child>
            <UiButton
              variant="outline"
              size="sm"
              class="h-8 w-[70px]"
              aria-labelledby="rows-per-page-label"
            >
              {{ table.getState().pagination.pageSize }}
            </UiButton>
          </UiDropdownMenuTrigger>
          <UiDropdownMenuContent align="end">
            <UiDropdownMenuItem
              v-for="size in pageSizeOptions"
              :key="size"
              @click="table.setPageSize(size)"
            >
              {{ size }}
            </UiDropdownMenuItem>
          </UiDropdownMenuContent>
        </UiDropdownMenu>
      </div>
      <div class="flex w-[100px] items-center justify-center body-14-medium">
        {{
          labels.pageOf(
            table.getState().pagination.pageIndex + 1,
            table.getPageCount(),
          )
        }}
      </div>
      <div class="flex items-center gap-x-2">
        <UiButton
          variant="outline"
          size="sm"
          class="hidden h-8 w-8 p-0 lg:flex"
          :disabled="!table.getCanPreviousPage()"
          @click="table.setPageIndex(0)"
        >
          <span class="sr-only">{{ labels.goToFirstPage }}</span>
          <UiIcon name="chevrons-left" :size="16" aria-hidden="true" />
        </UiButton>
        <UiButton
          variant="outline"
          size="sm"
          class="h-8 w-8 p-0"
          :disabled="!table.getCanPreviousPage()"
          @click="table.previousPage()"
        >
          <span class="sr-only">{{ labels.goToPreviousPage }}</span>
          <UiIcon name="chevron-left" :size="16" aria-hidden="true" />
        </UiButton>
        <UiButton
          variant="outline"
          size="sm"
          class="h-8 w-8 p-0"
          :disabled="!table.getCanNextPage()"
          @click="table.nextPage()"
        >
          <span class="sr-only">{{ labels.goToNextPage }}</span>
          <UiIcon name="chevron-right" :size="16" aria-hidden="true" />
        </UiButton>
        <UiButton
          variant="outline"
          size="sm"
          class="hidden h-8 w-8 p-0 lg:flex"
          :disabled="!table.getCanNextPage()"
          @click="table.setPageIndex(table.getPageCount() - 1)"
        >
          <span class="sr-only">{{ labels.goToLastPage }}</span>
          <UiIcon name="chevrons-right" :size="16" aria-hidden="true" />
        </UiButton>
      </div>
    </div>
  </div>
</template>
