<script lang="ts">
  import { browser } from '$app/environment';
  import { goto } from '$app/navigation';

  export let totalPages: number;
  let currentPage: number = 1;
  if(browser){
    const thisUrl = new URL(window.location.href);
    const urlsearch = new URLSearchParams(thisUrl.search);
    currentPage = urlsearch.has('page') ? Number(urlsearch.get('page')) : currentPage;
  }

  let leftItems: number[] = [];
  let rightItems: number[] = [];
  let currentItems: number[] = [];

  const setItems = () => {
    leftItems= currentPage > 3 ? [1, 2] : [];
    rightItems= currentPage < totalPages-2 ? [totalPages-1, totalPages] : [];
    if (currentPage === totalPages) {
      currentItems = [currentPage - 1, currentPage];
    }
    if (currentPage === 1) {
      currentItems = [currentPage, currentPage + 1];
    }
    if (currentPage !== totalPages && currentPage !== 1 ) {
      currentItems = [currentPage-1, currentPage, currentPage + 1];

      if(currentPage === 3) {
        currentItems.unshift(1);
      }
      if(currentPage === totalPages - 2) {
        currentItems.push(totalPages);
      }
    }
  }
  setItems();
  

  const clickHandler = (event: MouseEvent & { currentTarget: EventTarget & HTMLDivElement; }) => {
    if(browser) {
      const thisUrl = new URL(window.location.href);
      const urlsearch = new URLSearchParams(thisUrl.search);
      urlsearch.set('page', event.currentTarget?.getAttribute('data-value') || currentPage.toString())
      thisUrl.search = urlsearch.toString();
      goto(thisUrl.toString());
      currentPage = Number(event.currentTarget?.getAttribute('data-value')) || currentPage;
      setItems();
    }
  }
</script>
{#if (totalPages > 1)}
  <div class="pagination">
    <div  role="button" 
      tabindex={0} 
      data-value={currentPage > 1 ? currentPage - 1 : currentPage}
      class="paginationItem {currentPage > 1 ? '' : 'disabled'}"
      on:keydown
      on:click={currentPage > 1 ? clickHandler : () => {}}>
      {'<'}
    </div>
    {#if (leftItems.length !== 0)} 
      {#each leftItems as leftItem }
      <div role="button" 
        tabindex={0} 
        class="paginationItem"
        data-value={leftItem}
        on:keydown
        on:click={clickHandler}
      >
        {leftItem}
      </div>
      {/each}
      {#if (leftItems.at(-1) !== (currentItems[0] - 1))}
        ...
      {/if}
    {/if}

    {#each currentItems as currentItem }
    <div role="button" 
      tabindex={0} 
      class="paginationItem { currentItem === currentPage ? 'active' : '' }" 
      data-value={currentItem}
      on:keydown
      on:click={currentItem === currentPage ? () => {} : clickHandler}
    >
      {currentItem}
    </div>
    {/each}
    {#if (rightItems.length !== 0)}  
      {#if (rightItems[0] - 1 !== (currentItems.at(-1)))}
        ...
      {/if}

      {#each rightItems as rightItem }
      <div role="button" 
        tabindex={0} 
        class="paginationItem" 
        data-value={rightItem}
        on:keydown
        on:click={clickHandler}
      >
        {rightItem}
      </div>
      {/each}
    {/if}
    <div role="button" 
      tabindex={0} 
      data-value={currentPage < totalPages ? currentPage + 1 : currentPage}
      class="paginationItem {currentPage < totalPages ? '' : 'disabled'}"
      on:keydown
      on:click={currentPage < totalPages ? clickHandler : () => {}}
    >
      {'>'}
    </div>
  </div>
{/if}

<style lang="scss">
  @import 'src/scss/media';
  @import 'src/scss/variables';

  .pagination {
    width: 100%;
    margin-top: 25px;
    display: flex;
    justify-content: center;
    gap: 10px;
  }
  .paginationItem {
    font-size: 14px;
    line-height: 22px;
    width: 20px;
    border: thin solid $techGrey15;
    display: flex;
    padding: 2px 15px;
    border-radius: 2px;
    width: fit-content;
    justify-content: center;
    cursor: pointer;

    &:hover {
      background-color: $doveHover;
    }
    &.active {
      background-color: $redPrimary;
      border-color: $redPrimary;
      color: $postPoster;
      cursor: auto;
    }
    &.disabled {
      background-color: $fontWhite50;
      // color: #FFFFFF;
      cursor: not-allowed;
      opacity: .4;
    }
  }
</style>