<script>"use strict";
import { createEventDispatcher } from "svelte";
import Icon from "./Icon.svelte";
export let currentPage;
export let totalPages;
export let navigation = "arrow";
const dispatch = createEventDispatcher();
let pages = [];
function getVisiblePages() {
  pages = [];
  const edgeCount = 1;
  const maxVisible = 5;
  if (totalPages <= maxVisible) {
    for (let i = 1; i <= totalPages; i++) pages.push(i);
  } else if (currentPage <= edgeCount + 2) {
    for (let i = 1; i < maxVisible; i++) pages.push(i);
    pages.push("...", totalPages);
  } else if (currentPage >= totalPages - (edgeCount + 1)) {
    pages.push(1, "...");
    for (let i = totalPages - (maxVisible - 2); i <= totalPages; i++) pages.push(i);
  } else {
    pages.push(1, "...");
    for (let i = currentPage - 1; i <= currentPage + 1; i++) pages.push(i);
    pages.push("...", totalPages);
  }
  return pages;
}
function changePage(page) {
  if (page === "..." || typeof page !== "number" || page < 1 || page > totalPages) return;
  currentPage = page;
  pages = getVisiblePages();
  dispatch("pageChange", { page });
}
$: pages = getVisiblePages();
</script>

<nav class="flex items-center w-fit">
	<button
		class="flex items-center justify-center rounded-s border-y border-l border-stone-300 h-9 disabled:opacity-40 transition-all duration-300 ease-in-out"
		class:hover:bg-base-50={currentPage > 1}
		disabled={currentPage === 1}
		class:w-20={navigation === 'text'}
		class:w-11={navigation === 'arrow'}
		aria-label="previous-page"
		on:click={() => changePage(currentPage - 1)}
	>
		{#if navigation === 'arrow'}
			<Icon size="sm" iconName="chevron-left" />
		{:else}
			Prev
		{/if}
	</button>

	{#each pages as page, index}
		{#if page === '...'}
			<span
				class="flex items-center justify-center min-w-9 py-[10px] border-t border-b border-r border-stone-300 h-9"
				class:border-r={pages[index + 1] !== currentPage}>...</span
			>
		{:else}
			<button
				class="flex items-center justify-center min-w-9 py-[10px] border-t border-b h-9 transition-all duration-300 ease-in-out"
				class:border-l={index === 0}
				class:bg-blue-50={page === currentPage}
				class:hover:bg-base-50={currentPage !== page}
				class:border={page === currentPage}
				class:border-blue-500={page === currentPage}
				class:border-stone-300={page !== currentPage}
				class:border-r={page !== currentPage - 1}
				on:click={() => changePage(page)}
			>
				{page}
			</button>
		{/if}
	{/each}

	<button
		class="flex items-center justify-center rounded-e border-y border-r border-stone-300 h-9 disabled:opacity-40 transition-all duration-300 ease-in-out"
		class:hover:bg-base-50={currentPage < totalPages}
		disabled={currentPage === totalPages}
		class:w-20={navigation === 'text'}
		class:w-11={navigation === 'arrow'}
		aria-label="next-page"
		on:click={() => changePage(currentPage + 1)}
	>
		{#if navigation === 'arrow'}
			<Icon size="sm" iconName="chevron-right" />
		{:else}
			Next
		{/if}
	</button>
</nav>
