<template>
  <div class="table-pagination">
    <div v-if="paginationInfo" class="pagination-left">
      <typo-text variant="body-1-regular">
        {{ totalData ? formatCurrency(pageSize * pageNumber - (pageSize - 1)) : 0 }} -
        {{
          pageSize * pageNumber > totalData ? formatCurrency(totalData) : formatCurrency(pageSize * pageNumber)
        }}
        dari {{ formatCurrency(totalData) }}</typo-text
      >
    </div>
    <div class="pagination-center">
      <ul v-if="totalPages > 1">
        <li
          class="mr-4"
          :class="{ disabled: pageNumber == 1 }"
          @click="prevPage()"
        >
          <base-icon
            iconName="chevron_left"
            :color="pageNumber != 1 ? '#3E7DC0' : '#D4D7DB'"
          />
        </li>
        <li v-if="dotsLeft" class="page-number">
          <a
            role="button"
            @click="jumpPage(1)"
            :class="[1 === pageNumber ? 'active page' : '']"
          >
            1
          </a>
        </li>
        <li
          v-if="dotsLeft && limitPage + 1 != totalPages"
          class="mr-2 ellipsis"
        >
          ...
        </li>
        <li
          v-for="num in pages"
          :key="num"
          class="page-number"
          :class="{ active: num === pageNumber }"
          @click="jumpPage(num)"
        >
          <div class="px-1">{{ formatCurrency(num) }}</div>
        </li>
        <li
          v-if="dotsRight && limitPage + 1 != totalPages"
          class="mr-2 ellipsis"
        >
          ...
        </li>
        <li v-if="dotsRight">
          <a
            role="button"
            @click="jumpPage(totalPages)"
            :class="[totalPages === pageNumber ? 'active page' : '']"
            class="mr-2"
          >
            {{ formatCurrency(totalPages) }}
          </a>
        </li>
        <li class="ml-2" @click="nextPage()">
          <base-icon
            iconName="chevron_right"
            :color="totalPages != pageNumber ? '#3E7DC0' : '#D4D7DB'"
          />
        </li>
      </ul>
    </div>
    <div v-if="paginationSize" class="pagination-right">
      <typo-text variant="body-1-regular">Data per halaman</typo-text>
      <dropdown-select
        name="pageSize"
        :list="listPagesize"
        v-model="dataPageSize"
        @change="changeSize()"
      />
    </div>
  </div>
</template>

<script>
import BaseIcon from "@/components/Base/BaseIcon";
import TypoText from "@/components/Typography/TypoText";
import DropdownSelect from "@/components/Dropdown/DropdownSelect";

export default {
  components: {
    BaseIcon,
    TypoText,
    DropdownSelect,
  },
  props: {
    totalData: {
      type: [Number],
    },
    totalPages: {
      type: [Number],
      required: true,
    },
    pageSize: {
      type: [Number],
    },
    pageNumber: {
      type: [Number],
      required: true,
    },
    limitPage: {
      type: [Number],
      required: true,
    },
    paginationInfo: {
      type: [Boolean],
      default: true,
    },
    paginationSize: {
      type: [Boolean],
      default: true,
    },
    listPagesize: {
      type: [Array],
    },
  },
  data() {
    return {
      dotsRight: false,
      dotsLeft: false,
      pages: [],
      dataPageSize: null,
    };
  },
  watch: {
    totalPages() {
      this.clickPaging(this.pageNumber);
    },
    pageSize(newVal) {
      this.dataPageSize = newVal;
    }
  },
  created() {
    this.dataPageSize = this.pageSize;
  },
  mounted() {
    this.clickPaging(this.pageNumber);
  },
  methods: {
    changeSize() {
      this.$emit("changeSize", this.dataPageSize);
    },
    jumpPage(val) {
      if (this.pageNumber != val) {
        this.clickPaging(val);
        this.$emit("clickPage", val);
      }
    },
    nextPage() {
      if (this.totalPages != this.pageNumber) {
        this.clickPaging(this.pageNumber + 1);
        this.$emit("clickPage", this.pageNumber + 1);
      }
    },
    prevPage() {
      if (this.pageNumber != 1) {
        this.clickPaging(this.pageNumber - 1);
        this.$emit("clickPage", this.pageNumber - 1);
      }
    },
    clickPaging(page) {
      if (page >= 1 && page <= this.totalPages) {
        let datapage = [];
        for (let index = 0; index < this.totalPages; index++) {
          datapage[index] = index + 1;
        }

        if (this.totalPages > this.limitPage) {
          if (page == 1) {
            let setPages = datapage.slice(0, this.limitPage);
            this.dotsRight = true;
            this.dotsLeft = false;
            if (setPages.length === this.limitPage) {
              this.pages = setPages;
            } else {
              this.pages = datapage.slice(
                this.totalPages - this.limitPage,
                this.totalPages
              );
            }
          } else if (page === this.totalPages) {
            let setPages = datapage.slice(
              this.totalPages - this.limitPage,
              this.totalPages
            );
            this.dotsRight = false;
            this.dotsLeft = true;
            if (setPages.length === this.limitPage) {
              this.pages = setPages;
            } else {
              this.pages = datapage.slice(
                this.totalPages - this.limitPage,
                this.totalPages
              );
            }
          }

          if (this.pages[this.pages.length - 1] == page) {
            let setPages = datapage.slice(page - 2, this.limitPage + page - 2);
            (this.dotsRight =
              this.totalPages === setPages[setPages.length - 1] ? false : true),
              (this.dotsLeft = true);
            if (setPages.length === this.limitPage) {
              this.pages = setPages;
            } else {
              this.pages = datapage.slice(
                this.totalPages - this.limitPage,
                this.totalPages
              );
            }
          } else {
            if (this.pages[0] == page) {
              let getStart =
                page - this.limitPage <= 0 ? 0 : page - this.limitPage + 1;
              let getEnd = getStart === 0 ? this.limitPage : this.pages[0] + 1;
              let setPages = datapage.slice(getStart, getEnd);
              this.dotsRight = true;
              this.dotsLeft =
                setPages[setPages.length - 1] === this.limitPage ? false : true;
              if (setPages.length === this.limitPage) {
                this.pages = setPages;
              } else {
                this.pages = datapage.slice(
                  this.totalPages - this.limitPage,
                  this.totalPages
                );
              }
            }
          }
        } else {
          this.pages = datapage;
          this.dotsRight = false;
          this.dotsLeft = false;
        }
      }
    },
    formatCurrency(value) {
      return String(value).replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ".")
    },
  },
};
</script>

<style lang="scss">
@use "@/assets/style/_color.scss" as *;

.table-pagination {
  color: $neutral-6;
  display: flex;
  align-items: center;
  justify-content: center;

  .pagination-center {
    margin: 0 auto;

    ul {
      display: flex;
      list-style: none;
      padding: 0 10px;
      margin: 0px;
      align-items: center;

      li {
        display: flex;
        cursor: pointer;
        height: 24px;
        min-width: 24px;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        transition: all 0.3s;
      }

      li:hover {
        background: $dark-blue-1;
      }

      .page-number {
        margin-right: 8px;
        transition: none;
      }

      .ellipsis {
        cursor: default;
      }

      .ellipsis:hover {
        background: none;
      }

      .active,
      .active:hover {
        background: $dark-blue-4;
        color: $neutral-0;
      }
    }

    .disabled {
      pointer-events: none;
    }
  }

  .pagination-right {
    display: flex;
    align-items: center;

    .select-box {
      margin-left: 16px;
    }
  }

  .body-1-regular {
    min-width: max-content;
    line-height: normal;
  }
}
</style>
