<template>
  <div class="vc-pagination">
    <div class="vc-pagination-container-left">
      <div class="vc-pagination-container-left-label">
        {{ labelText }}
      </div>
      <div>
        <VcDropdown
          v-model="value"
          :options="dropDownOptions"
          :config="config"
          :placeholder="String(value)"
          readonly
        />
      </div>
    </div>
    <div class="vc-pagination-container-right">
      <div class="vc-pagination-container-right-text">
        <strong>{{ start === end ? start : start + 1 }} - {{ end }}</strong> <span>{{ $tVU.t('general.of') }}</span> <strong>{{ total }}</strong>
      </div>
      <div class="vc-pagination-container-right-buttons">
        <VcPaginationButton
          icon="vc-icon-left"
          :disabled="disableDecrement"
          @click="decrement"
        />
        <VcPaginationButton
          icon="vc-icon-right"
          :disabled="disableIncrement"
          @click="increment"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import VcPaginationButton from './VcPaginationButton.vue'
import VcDropdown from '@/components/VcDropdown/VcDropdown.vue'
import { DropDownOptions } from './VcPagination.types'

export default defineComponent({
  name: 'VcPagination',
  components: {
    VcPaginationButton,
    VcDropdown
  },
  props: {
    modelValue: {
      type: Number,
      default: 1
    },
    perPage: {
      type: Number,
      default: 10
    },
    total: {
      type: Number,
      default: 0
    },
    label: {
      type: String,
      default: ''
    }
  },
  emits: ['update:modelValue', 'prev', 'next'],
  data () {
    return {
      config: {
        labelKey: 'text',
        valueKey: 'page'
      },
      value: 1,
      dropDownOptions: [] as DropDownOptions,
      defaultStartPageValue: 1
    }
  },
  computed: {
    start () {
      return (this.value - 1) * this.perPage
    },
    end () {
      const end = this.start + this.perPage
      return this.total < end ? this.total : end
    },
    disableDecrement () {
      return this.defaultStartPageValue === this.value
    },
    disableIncrement () {
      return this.total === this.end
    },
    labelText () {
      return this.label ? this.label : this.$tVU.t('pagination.pages')
    }
  },
  watch: {
    value (val) {
      this.$emit('update:modelValue', val)
    },
    modelValue (val) {
      this.value = val
    },
    perPage () {
      this.createDropDownOptions()
    }
  },
  mounted () {
    this.value = this.modelValue
    this.defaultStartPageValue = this.modelValue
    this.createDropDownOptions()
  },
  methods: {
    createDropDownOptions () {
      this.dropDownOptions = []
      const numbersOfPages = Math.ceil(this.total / this.perPage)
      for (let i = 1; i <= numbersOfPages; i++) {
        this.dropDownOptions.push({
          text: i, page: i
        })
      }
    },
    decrement () {
      this.$emit('prev')
      this.value--
    },
    increment () {
      this.$emit('next')
      this.value++
    }
  }
})
</script>

<style lang="scss" scoped>
.vc-pagination {
  @apply flex items-center justify-between w-full;
  &-container-left {
    @apply flex items-center;
    [dir='ltr'] &-label {
      @apply mr-4;
    }
    [dir='rtl'] &-label {
      @apply ml-4;
    }
  }
  &-container-right {
    @apply flex items-center;
    [dir='ltr'] &-text {
      @apply mr-4;
    }
    [dir='rtl'] &-text {
      @apply ml-4;
    }
    [dir='ltr'] &-buttons {
      @apply flex flex-row;
    }
    [dir='rtl'] &-buttons {
      @apply flex flex-row-reverse;
    }
  }
}
:deep(.vc-selectbox) {
  border: none;
}
:deep(.vc-dropdown-wrapper) {
  width: 100%;
  max-width: 70px !important;
}
:deep(.vc-popover--top-right .vc-popover-arrow), :deep(.vc-popover--bottom-right .vc-popover-arrow) {
  right: 1.5rem;
}
</style>
