<script lang="ts">
  import { onDestroy, onMount, setContext } from "svelte";

  import Button from "../Button/index.svelte";
  import { PaginateProps } from "../types";
  import styles from "./index.module.css";
  import PaginateContext from "./paginate.context";

  export let currentPageItemsCount: PaginateProps["currentPageItemsCount"];
  export let itemsPerPage: PaginateProps["itemsPerPage"];
  export let handlePageChange: PaginateProps["handlePageChange"] = undefined;
  export let reFetch: PaginateProps["reFetch"];
  export let pageTokenMap: PaginateProps["pageTokenMap"];

  function handlePreviousClick() {
    const currentOffset = _offset;
    const newOffset = currentOffset - itemsPerPage;
    _offset = newOffset;

    // Update query string in URL
    typeof handlePageChange === "function" &&
      handlePageChange({
        offset: newOffset,
      });
    // Trigger data re-fetch with new offset
    typeof reFetch === "function" &&
      reFetch({
        offset: newOffset,
        limit: itemsPerPage,
        pageToken: pageTokenMap[newOffset - itemsPerPage],
      });
  }
  function handleNextClick() {
    const currentOffset = _offset;
    const newOffset = currentOffset + itemsPerPage;
    _offset = newOffset;
    // Update query string in URL
    typeof handlePageChange === "function" &&
      handlePageChange({
        offset: newOffset,
      });
    // Trigger data re-fetch with new offset
    typeof reFetch === "function" &&
      reFetch({
        offset: newOffset,
        limit: itemsPerPage,
        pageToken: pageTokenMap[currentOffset],
      });
  }
  function offsetFromBrowserQS() {
    const offsetFromQueryParams = new URLSearchParams(
      window.location.search
    ).get("offset");
    if (offsetFromQueryParams && Number.isFinite(+offsetFromQueryParams)) {
      return Math.abs(+offsetFromQueryParams);
    }
    return null;
  }
  function reFetchUsingBrowserQS() {
    const _offsetFromBrowserQS = offsetFromBrowserQS();
    if (typeof _offsetFromBrowserQS === "number") {
      // console.log(`offset ${_offsetFromBrowserQS} found in url`);
      _offset = _offsetFromBrowserQS;
      // console.log(`fetching with offset ${_offsetFromBrowserQS}`);
      typeof reFetch === "function" &&
        reFetch({
          offset: _offsetFromBrowserQS,
          limit: itemsPerPage,
        });
    } else {
      // console.log(`no offset found in url, setting offset to 0 in url`);
      typeof handlePageChange === "function" &&
        handlePageChange({
          offset: 0,
        });
      // console.log(`fetching with offset 0`);
      typeof reFetch === "function" &&
        reFetch({
          offset: 0,
          limit: itemsPerPage,
        });
    }
  }
  $: isPaginationHidden = () => {
    return _offset === 0 && currentPageItemsCount < itemsPerPage;
  };
  $: isPreviousDisabled = () => {
    return _offset === 0;
  };
  $: isNextDisabled = () => {
    return currentPageItemsCount < itemsPerPage;
  };

  let _offset = 0;

  onMount(() => {
    // console.log(`adding popstate event listener`);
    window.addEventListener("popstate", reFetchUsingBrowserQS);
    reFetchUsingBrowserQS();
  });

  setContext(PaginateContext.key, {
    offset: _offset,
  });

  onDestroy(() => {
    // console.log(`removing popstate event listener`);
    window.removeEventListener("popstate", reFetchUsingBrowserQS);
  });
</script>

<slot />

{#if !isPaginationHidden()}
  <nav aria-label="Pagination Navigation">
    <ul class={styles.ul}>
      <li>
        <Button
          name="Prev"
          variant="outline"
          icon="LeftArrowIcon"
          aria-label="Goto Previous Page"
          handleClick={handlePreviousClick}
          disabled={isPreviousDisabled()}
        />
      </li>
      <li>
        <Button
          name="Next"
          variant="outline"
          icon="RightArrowIcon"
          aria-label="Goto Next Page"
          handleClick={handleNextClick}
          disabled={isNextDisabled()}
        />
      </li>
    </ul>
  </nav>
{/if}