<template>

  <nav aria-label="Page navigation example" class="d-flex justify-content-between align-items-center">
    <div class="d-flex gap-2 align-items-center">
      <ul class="pagination itf-pagination mb-0">
        <li
          v-for="(page, n) in pagesArr"
          :key="n"
          class="page-item"
          :class="{'active': page.current, 'disabled': !page.active && !page.current }"
        >
          <a v-if="page.type === 'prev'" href="" class="page-link" :aria-label="$t('components.pagination.previous')" @click.prevent="onPage(page.number)">
            <itf-icon name="chevron_left" aria-hidden="true" />
            <span class="visually-hidden">{{$t('components.pagination.previous')}}</span>
          </a>
          <a v-else-if="page.type === 'first'" class="page-link" href="" @click.prevent="onPage(page.number)">{{page.number}}</a>
          <a v-else-if="page.type === 'page'" class="page-link" href="" @click.prevent="onPage(page.number)">{{page.number}}</a>
          <a v-else-if="page.type === 'last'" class="page-link" href="" @click.prevent="onPage(page.number)">{{page.number}}</a>
          <span v-else-if="page.type === 'more'" class="page-link">&hellip;</span>
          <a v-if="page.type === 'next'" href="" class="page-link" :aria-label="$t('components.pagination.previous')" @click.prevent="onPage(page.number)">
            <span class="visually-hidden">{{$t('components.pagination.next')}}</span>
            <itf-icon name="chevron_right" aria-hidden="true" />
          </a>
        </li>
      </ul>
      <!--div>
        1-25 of {{length}} items
      </div-->
    </div>

    <div v-if="showSize" class="d-flex gap-2 align-items-center">
      <span>{{$t('components.pagination.itemsPerPage')}}</span>
      <itf-dropdown
        toggle
        shadow
        :button-options="{ secondary: true, small: true }"
        class="itf-pagination-select"
        :value="size"
      >
        <template #button>
          <span>{{size}}</span>
        </template>
        <div class="dropdown-item" v-for="option in perPageOptions" :key="option.value" @click="onPerPage(option.value)">
          {{option.title}}
        </div>
      </itf-dropdown>
    </div>
  </nav>

</template>
<script>
import { Vue, Component, Model, Prop } from 'vue-property-decorator';
import itfIcon from '../icon/Icon.vue';
import itfDropdown from "../dropdown/Dropdown.vue";

const MIN_PAGES_BLOCKS = 2;
const MAX_PAGES_BLOCKS = 6;
const PER_PAGE_OPTIONS = [
  { title: '20', value: 20 },
  { title: '50', value: 50 },
  { title: '100', value: 100 }
];

export default @Component({
  name: 'itfPagination',
  components: {
    itfDropdown,
    itfIcon
  }
})
class itfPagination extends Vue {
  @Model('input') value;
  @Prop({ type: [String, Number], default: 0 }) length;
  @Prop({ type: [String, Number], default: 20 }) size;
  @Prop({ type: [String, Number] }) pages;
  @Prop({ type: [String, Number], default: MIN_PAGES_BLOCKS }) minBlocks;
  @Prop({ type: [String, Number], default: MAX_PAGES_BLOCKS }) maxBlocks;
  @Prop({type: Array, default: () => PER_PAGE_OPTIONS}) perPageOptions;
  @Prop(Boolean) showSize;

  onPage(page) {
    this.$emit('input', page);
  }

  onPerPage(size) {
    this.$emit('per-page', size);
  }

  get pagesArr () {
    const pageSize = Number(this.size);
    const totalItems = Number(this.length);
    const currentPage = this.value;
    let maxBlocks = Number(this.maxBlocks);
    maxBlocks = maxBlocks && maxBlocks < MAX_PAGES_BLOCKS ? MAX_PAGES_BLOCKS : maxBlocks;
    const minBlocks = Number(this.minBlocks);

    const pages = [];
    const numPages = this.pages ? Number(this.pages) : Math.ceil(totalItems / pageSize);

    if (numPages > 1) {
      pages.push({
        type: 'prev',
        number: Math.max(1, currentPage - 1),
        active: currentPage > 1
      });
      pages.push({
        type: 'first',
        number: 1,
        active: currentPage > 1,
        current: currentPage === 1
      });
      const maxPivotPages = Math.round((maxBlocks - minBlocks) / 2);
      let minPage = Math.max(2, currentPage - maxPivotPages);
      const maxPage = Math.min(numPages - 1, currentPage + maxPivotPages * 2 - (currentPage - minPage));
      minPage = Math.max(2, minPage - (maxPivotPages * 2 - (maxPage - minPage)));
      let i = minPage;
      while (i <= maxPage) {
        if ((i === minPage && i !== 2) || (i === maxPage && i !== numPages - 1)) {
          pages.push({
            type: 'more',
            active: false
          });
        } else {
          pages.push({
            type: 'page',
            number: i,
            active: currentPage !== i,
            current: currentPage === i
          });
        }
        i++;
      }
      pages.push({
        type: 'last',
        number: numPages,
        active: currentPage !== numPages,
        current: currentPage === numPages
      });
      pages.push({
        type: 'next',
        number: Math.min(numPages, currentPage + 1),
        active: currentPage < numPages
      });
    }
    return pages;
  }
}
</script>
