<template>
  <div class="pagination">
    <factor-btn :disabled="pageCurrent == 1" @click="page('previous')">
      <factor-icon icon="fas fa-arrow-left" />
    </factor-btn>
    <div class="sep">{{ pageCurrent }} of {{ pageCount }}</div>
    <factor-btn :disabled="pageCurrent == pageCount" @click="page('next')">
      <factor-icon icon="fas fa-arrow-right" />
    </factor-btn>
  </div>
</template>

<script lang="ts">
import { factorBtn, factorIcon } from "@factor/ui"
import { stored } from "@factor/api"

export default {
  components: { factorBtn, factorIcon },
  props: {
    postType: { type: String, default: "" },
  },
  computed: {
    index(this: any) {
      return stored(this.postType) || {}
    },
    jobsMeta(this: any) {
      const { meta = [] } = this.index
      return meta
    },
    pageCount(this: any) {
      return this.jobsMeta.pageCount || 1
    },
    count(this: any) {
      return this.jobsMeta.totalForQuery || 1
    },
    pageCurrent(this: any) {
      return this.jobsMeta.pageCurrent || 1
    },
  },
  methods: {
    page(direction: any) {
      let page
      if (direction == "next" && this.pageCurrent !== this.pageCount) {
        page = this.pageCurrent + 1
      } else if (this.pageCurrent > 1) {
        page = this.pageCurrent - 1
      }

      if (page) {
        this.$router.push({ query: { ...this.$route.query, page } })
      }
    },
  },
}
</script>

<style lang="less">
.plugin-jobs {
  .pagination {
    max-width: 48rem;
    margin: 2em auto;
    display: flex;
    align-items: center;
    justify-content: center;
    @media (max-width: 767px) {
      justify-content: flex-end;
      .items,
      .sep {
        display: none;
      }
    }
    > * {
      margin: 0 5px;
    }
    .sep {
      opacity: 0.4;
    }
    .factor-btn {
      padding: 0.5em;
    }
  }
}
</style>
