<template>
  <div
    v-if="page !== pages"
    class="l-pagination-button"
    :class="[
      page === currentPage ? 'l-pagination-button--current' : null,
      showButton ? null : 'l-pagination-button--hidden',
    ]"
  >
    <l-button
      v-if="showFirstPages || currentPage === page"
      type="neutral"
      :shade="page === currentPage ? '500' : '100'"
      size="small"
      @click="changeToPageNumber(page)"
    >
      {{ page }}
    </l-button>
    <l-button
      v-else-if="showLastPages && currentPage !== pages"
      type="neutral"
      :shade="page === currentPage ? '500' : '100'"
      size="small"
      @click="changeToPageNumber(page)"
    >
      {{ page }}
    </l-button>
    <div v-else class="l-pagination-button-ellipses" />
  </div>
</template>

<script>
import LButton from "../atoms/LButton.vue";
export default {
  name: "l-pagination-button",
  components: { LButton },
  props: {
    pages: {
      type: Number,
      required: true,
    },
    page: {
      type: Number,
      required: true,
    },
    currentPage: {
      type: Number,
      required: true,
    },
  },
  computed: {
    showFirstPages() {
      if (this.currentPage === 1) {
        return this.page === 1 || this.page === 2 || this.page === 3;
      } else if (this.currentPage === 3) {
        return (
          this.page === 1 ||
          this.page === 2 ||
          this.page === 4 ||
          this.page === 5
        );
      } else if (this.currentPage === 4) {
        return (
          this.page === 1 ||
          this.page === 2 ||
          this.page === 3 ||
          this.page === 5
        );
      } else if (this.currentPage === this.pages - 1) {
        return (
          this.page === 1 ||
          this.page === 2 ||
          this.page === 3 ||
          this.page === this.pages - 2
        );
      } else if (this.currentPage === this.pages) {
        return (
          this.page === 1 ||
          this.page === 2 ||
          this.page === 3 ||
          this.page === this.pages - 1 ||
          this.page === this.pages - 2
        );
      } else {
        return (
          this.page === this.currentPage - 1 ||
          this.page === this.currentPage + 1
        );
      }
    },
    showLastPages() {
      if (this.currentPage <= 2) {
        return this.page === this.pages - 1 || this.page === this.pages - 2;
      } else if (this.currentPage === this.pages - 3) {
        return this.page === this.pages - 1 || this.page === this.pages - 2;
      } else if (this.currentPage === this.pages - 2) {
        return this.page === this.pages - 1 || this.page === this.pages - 4;
      }
      return false;
    },
    showButton() {
      var show = false;
      if (this.showFirstPages || this.currentPage === this.page) {
        show = true;
      } else if (this.showLastPages && this.currentPage !== this.pages) {
        show = true;
      }
      return show;
    },
  },
  methods: {
    changeToPageNumber(page) {
      this.$emit("changeToPageNumber", page);
    },
  },
};
</script>

<style>
.l-pagination-button {
  display: none;
  height: fit-content;
  margin-top: auto;
  /* align-self: center; */
}
.l-pagination-button--current {
  display: block;
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-md);
}

.l-pagination-button-ellipses {
  width: var(--spacing-1);
  height: var(--spacing-1);
  border-radius: var(--radius-full);
  background-color: var(--neutral-200);
  margin-left: -2px;
  margin-right: -2px;
  margin-bottom: var(--spacing-0-5);
}
/* Add media query */
@media screen and (min-width: 768px) {
  .l-pagination-button {
    display: block;
  }
  .l-pagination-button--hidden {
    display: none;
  }
  /* show first 3 */
  .l-pagination-button--hidden:nth-child(-n + 4) {
    display: block;
  }
  /* show last 3 */
  .l-pagination-button--hidden:nth-last-child(-n + 4) {
    display: block;
  }
}
</style>
