<template>
  <div class="fl-pagination">
    <div
        :class="{'disabled': viewLeftArrow}"
        class="fl-pagination-item__back"
        @click="!viewLeftArrow && setPage(pagination.current_page - 1)"
    >
      <div class="fl-pagination-item">
        <fl-icon
          :width="10"
          :height="10"
          name="left"
        />
      </div>
      Назад
    </div>
    <div
      v-for="(item, i) in items"
      :key="`pagination-${i}`"
      class="fl-pagination-item"
      :class="{
        'active': hasActive(item.value),
        'disabled': item.value === '...'
      }"
      @click="setPage(item.value)"
    >
      {{ item.value }}
    </div>
    <div
        :class="{'disabled': viewRightArrow}"
        class="fl-pagination-item_next"
        @click="!viewRightArrow && setPage(pagination.current_page + 1)"
    >
      Вперёд
      <div class="fl-pagination-item">
        <fl-icon
          :width="10"
          :height="10"
          name="right"
        />
      </div>
    </div>
  </div>
</template>

<script>
import FlIcon from './icon/FlIcon'

const ETC = '...'
export default {
  name: 'FlPagination',
  components: { FlIcon },
  props: {
    pagination: {
      type: Object,
      default: () => ({})
    }
  },

  computed: {
    items () {
      if (this.pagination.last_page <= 4) {
        var arr = []
        for (var i = 1; i <= this.pagination.last_page; i++) {
          arr.push({ value: i })
        }
        return arr
      }
      if (this.pagination.current_page === 1) {
        return [
          { value: this.pagination.current_page }, { value: this.pagination.current_page + 1 },
          { value: ETC }, { value: this.pagination.last_page }
        ]
      }
      if (this.pagination.current_page === 2) {
        return [
          { value: 1 },
          { value: this.pagination.current_page }, { value: this.pagination.current_page + 1 },
          { value: ETC }, { value: this.pagination.last_page }
        ]
      }

      if (this.pagination.current_page === 3) {
        return [
          { value: this.pagination.current_page - 2 },
          { value: this.pagination.current_page - 1 },
          { value: this.pagination.current_page }, { value: this.pagination.current_page + 1 },
          { value: ETC }, { value: this.pagination.last_page }
        ]
      }

      if (this.pagination.last_page - this.pagination.current_page <= 1) {
        return [
          { value: 1 }, { value: ETC }, { value: this.pagination.last_page - 2 },
          { value: this.pagination.last_page - 1 },
          { value: this.pagination.last_page }]
      }

      if (this.pagination.last_page - this.pagination.current_page === 2) {
        return [
          { value: 1 }, { value: ETC }, { value: this.pagination.current_page - 1 },
          { value: this.pagination.current_page }, { value: this.pagination.last_page - 1 },
          { value: this.pagination.last_page }]
      }

      return [
        { value: 1 }, { value: ETC }, { value: this.pagination.current_page - 1 },
        { value: this.pagination.current_page }, { value: this.pagination.current_page + 1 },
        { value: ETC }, { value: this.pagination.last_page }
      ]
    },

    viewLeftArrow () {
      return !this.pagination.current_page || !(this.pagination.current_page - 1) || this.pagination.last_page <= 4
    },

    viewRightArrow () {
      return this.pagination.last_page - this.pagination.current_page <= 2 || this.pagination.last_page <= 4
    }
  },

  methods: {
    setPage (value) {
      if (this.pagination.current_page !== value) this.$emit('set-page', value)
    },

    hasActive (value) {
      return this.pagination.current_page === value
    }
  }
}
</script>

<style lang="scss" scoped>
  .fl-pagination {
    display: flex;
    align-items: center;
    font-size: 14px;
    fill: $grey-02;
  }

  .fl-pagination-item {
    width: 36px;
    height: 36px;
    color: $grey-02;
    cursor: pointer;

    @include flex-center;

    &:hover {
      color: $primary;
    }
  }

  .fl-pagination-item__back,
  .fl-pagination-item_next {
    display: flex;
    align-items: center;
    margin-right: 24px;
    color: $primary;
    cursor: pointer;
    fill: $primary;
  }

  .fl-pagination-item_next {
    margin-right: initial;
    margin-left: 24px;
  }

  .fl-pagination-item_next .fl-pagination-item,
  .fl-pagination-item__back .fl-pagination-item {
    margin-right: 12px;
    border: 1px solid $grey-01;
    border-radius: 2px;
  }

  .fl-pagination-item_next .fl-pagination-item {
    margin-right: initial;
    margin-left: 12px;
  }

  .active {
    color: $primary;
    border-radius: 100%;
  }

  .disabled {
    color: $grey-02;
    cursor: initial;
    pointer-events: none;
    fill: $grey-02;
  }
</style>
