<template>
  <div
    class="flex items-center justify-between rounded-lg border-gray-200 bg-white px-4 py-3 sm:px-6"
  >
    <div class="flex flex-1 justify-between sm:hidden">
      <div
        href="#"
        class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
        @click="currentPageNumber == '1' ? '' : goToPreviousPage()"
        :id="id + '_previous_page'"
      >
        Previous
      </div>
      <div
        href="#"
        class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
        @click="currentPageNumber == lastPageNumber ? '' : goToNextPage()"
        :id="id + '_next_page'"
      >
        Next
      </div>
    </div>
    <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
      <div class="flex">
        <c-select
          v-if="showEntryPicker"
          class="mr-2 w-20"
          :options="rowOptions"
          :isValidate="true"
          :value="totalRecordsOnPage.value"
          :isRequired="false"
          :id="id + '_totalrecords_dropdown'"
          dropDownToTop="bottom-full"
          dropDownToTop2="absolute bottom-full z-50 bg-white right-0"
          @onChangeValue="(value) => $emit('handle-Row-Count-Change', value)"
        ></c-select>
        <p class="pt-2 text-sm text-gray-700">
          Showing
          <span class="font-medium">{{
            formatNumber(setPaginationRecords.from)
          }}</span>
          to
          <span class="font-medium">{{
            formatNumber(setPaginationRecords.to)
          }}</span>
          of
          <span class="font-medium">{{
            formatNumber(setPaginationRecords.totalRecords)
          }}</span>
          results
        </p>
      </div>
      <div>
        <nav
          class="relative z-0 inline-flex -space-x-px rounded-md shadow-sm"
          aria-label="Pagination"
        >
          <div class="hidden md:-mt-px md:flex">
            <div
              href="#"
              @click="currentPageNumber == '1' ? '' : goToPreviousPage()"
              class="relative inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
              :class="
                currentPageNumber == '1'
                  ? 'pointer-events-none text-gray-400'
                  : 'group cursor-pointer text-gray-500 hover:text-gray-700'
              "
              :id="id + '_previous_page'"
            >
              <span class="sr-only">Previous</span>
              <!-- Heroicon name: solid/chevron-left -->
              <c-icon
                name="chevron-left"
                type="solid"
                cursorType="cursor-pointer"
                class="h-5 w-5 text-gray-400"
              />
            </div>
            <div
              v-for="page in pageRange"
              :key="page"
              class="cursor-pointer"
              :class="[
                page == currentPageNumber
                  ? 'relative z-10 inline-flex items-center border border-indigo-500 bg-indigo-50 px-4 py-2 text-sm font-medium text-indigo-600'
                  : '',
                page === '...'
                  ? 'relative inline-flex items-center border border-r-0 border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50'
                  : '',
                page !== currentPageNumber && page !== '...'
                  ? 'relative inline-flex items-center border border-r-0 border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50'
                  : '',
                page == currentPageNumber + 1 ? 'border-l-0' : '',
              ]"
              @click="changePage(page)"
              :id="id + '_page_' + page"
            >
              <div v-if="page === '...'">...</div>
              <div v-else>
                {{ page }}
              </div>
            </div>
            <div
              href="#"
              class="relative inline-flex items-center rounded-r-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
              @click="currentPageNumber == lastPageNumber ? '' : goToNextPage()"
              :class="
                currentPageNumber == lastPageNumber
                  ? 'pointer-events-none text-gray-400 border-l-0'
                  : 'group cursor-pointer text-gray-500 hover:text-gray-700'
              "
              :id="id + '_next_page'"
            >
              <span class="sr-only">Next</span>
              <!-- Heroicon name: solid/chevron-right -->
              <c-icon
                name="chevron-right"
                type="solid"
                cursorType="cursor-pointer"
                class="h-5 w-5 text-gray-400"
              />
            </div>
          </div>
        </nav>
      </div>
    </div>
  </div>
</template>
<script>
import { isEqual } from "lodash-es";
import CSelect from "../CSelect/CSelect.vue";
import CIcon from '../CIcon/CIcon.vue';

export default {
  name: "CPagination",
  props: {
    setPaginationRecords: {
      type: Object,
    },
    setCurrentPage: {
      type: Function,
    },
    setPreviousPage: {
      type: Function,
    },
    setNextPage: {
      type: Function,
    },
    showEntryPicker: {
      type: Boolean,
      default: false,
    },
    totalRecordsOnPage: {
      type: Object,
    },
    id: {
      type: String,
    },
  },
  components: { CSelect, CIcon },
  data() {
    return {
      currentPageNumber: this.setPaginationRecords.currentPage,
      lastPageNumber: this.setPaginationRecords.lastPage,
      rowOptions: [
        {
          option: 10,
          value: 10,
        },
        {
          option: 25,
          value: 25,
        },
      ],
    };
  },
  computed: {
    pageRange() {
      var current = this.setPaginationRecords.currentPage,
        last = this.setPaginationRecords.lastPage,
        delta = 2,
        left = current - delta,
        right = current + delta + 1,
        range = [],
        rangeWithDots = [],
        l;
      for (let i = 1; i <= last; i++) {
        if (i == 1 || i == last || (i >= left && i < right)) {
          range.push(i);
        }
      }
      for (let i of range) {
        if (l) {
          if (i - l === 2) {
            rangeWithDots.push(l + 1);
          } else if (i - l !== 1) {
            rangeWithDots.push("...");
          }
        }
        rangeWithDots.push(i);
        l = i;
      }
      return rangeWithDots;
    },
  },
  methods: {
    changePage(page) {
      if (page !== "...") {
        this.$emit("setCurrentPage", page);
        this.currentPageNumber = page;
      }
    },
    goToPreviousPage() {
      var previousPage = this.currentPageNumber - 1;
      this.currentPageNumber = previousPage;
      this.$emit("setPreviousPage", previousPage);
    },
    goToNextPage() {
      var nextPage = this.currentPageNumber + 1;
      this.currentPageNumber = nextPage;
      this.$emit("setNextPage", nextPage);
    },
    formatNumber(number) {
      return parseFloat(number).toLocaleString("en-IN", {
        minimumFractionDigits: 0,
        maximumFractionDigits: 0,
      });
    },
  },
  watch: {
    setPaginationRecords(newVal, oldVal) {
      if (!isEqual(newVal, oldVal)) {
        this.currentPageNumber = newVal.currentPage;
        this.lastPageNumber = newVal.lastPage;
      }
    },
  },
};
</script>
