<!--
  -   This file is a part of the SteamWar software.
  -
  -   Copyright (C) 2024 SteamWar.de-Serverteam
  -
  -   This program is free software: you can redistribute it and/or modify
  -   it under the terms of the GNU Affero General Public License as published by
  -   the Free Software Foundation, either version 3 of the License, or
  -   (at your option) any later version.
  -
  -   This program is distributed in the hope that it will be useful,
  -   but WITHOUT ANY WARRANTY; without even the implied warranty of
  -   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  -   GNU Affero General Public License for more details.
  -
  -   You should have received a copy of the GNU Affero General Public License
  -   along with this program.  If not, see <https://www.gnu.org/licenses/>.
  -->

<script lang="ts">
  import { preventDefault } from 'svelte/legacy';

    import {
        ChevronDoubleLeftOutline,
        ChevronDoubleRightOutline,
        ChevronLeftOutline,
        ChevronRightOutline,
    } from "flowbite-svelte-icons";



  interface Props {
    page?: number;
    maxPage: number;
    firstUrl?: string;
    lastUrl?: string;
    previousUrl?: string;
    nextUrl?: string;
    pagesUrl?: (i: number) => string;
  }

  let {
    page = $bindable(0),
    maxPage,
    firstUrl = "#",
    lastUrl = "#",
    previousUrl = "#",
    nextUrl = "#",
    pagesUrl = () => "#"
  }: Props = $props();

    const previous = () => {
        page = Math.max(page - 1, 0);
    };

    const next = () => {
        page = Math.min(page + 1, maxPage - 1);
    };
    let pages = $derived(new Array(maxPage).fill(0)
        .map((_, i) => i + 1)
        //.slice(Math.max(page - 2, 0) - Math.abs(Math.max(page + 3 - maxPage, 0)), Math.min(page + 3, maxPage) + Math.abs(Math.min(page - 2, 0)))
        .map(i => ({
            name: i.toString(),
            active: i === page + 1,
            i: i - 1
        })));
</script>

<div class="w-full flex justify-center mt-4">
    <ul class="inline-flex flex-wrap">
        <li>
            <a href={firstUrl} onclick={preventDefault(() => page = 0)} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-r-none">
                <span class="sr-only">Next</span>
                <ChevronDoubleLeftOutline class="w-3 h-3" />
            </a>
        </li>
        <li>
            <a href={previousUrl} onclick={preventDefault(previous)} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-none">
                <span class="sr-only">Previous</span>
                <ChevronLeftOutline class="w-3 h-3" />
            </a>
        </li>
        {#each pages as p}
            <li>
                <a href={pagesUrl(p.i)} onclick={preventDefault(() => page = p.i)} class="btn h-8 px-3 text-sm flex items-center !m-0 !rounded-none" class:btn-neutral={!p.active}>
                    <span>{p.name}</span>
                </a>
            </li>
        {/each}
        <li>
            <a href={nextUrl} onclick={preventDefault(next)} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-none">
                <span class="sr-only">Next</span>
                <ChevronRightOutline class="w-3 h-3" />
            </a>
        </li>
        <li>
            <a href={lastUrl} onclick={preventDefault(() => page = maxPage - 1)} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-l-none">
                <span class="sr-only">Next</span>
                <ChevronDoubleRightOutline class="w-3 h-3" />
            </a>
        </li>
    </ul>
</div>