<i18n>
{
  "en": {
    "search": "Search",
    "all": "All",
    "pageText": "{0}-{1} of {2}",
    "pageTextZero": "0 of 0",
    "rowsPerPageText": "Rows per page:"
  },
  "de": {
    "search": "Suche",
    "all": "Alle",
    "pageText": "{0}-{1} von {2}",
    "pageTextZero": "0 von 0",
    "rowsPerPageText": "Reihen pro page:"
  }
}
</i18n>

<template>
  <v-layout wrap align-center class="caption font-weight-thin">
    <v-flex md3 sm5 xs12 order-md1 order-sm1 order-xs1 class="text-xs-left">
      <v-text-field
        class="search-field"
        :placeholder="$t('search')"
        :value="search"
        @input="setSearch"
        hide-details
        prepend-inner-icon="search"
      ></v-text-field>
    </v-flex>
    <v-flex md4 sm12 xs12 offset-md1 offset-sm0 offset-xs0 order-md2 order-sm3 order-xs3 class="text-md-center text-xs-right">
      {{ $t('rowsPerPageText') }}
      <v-select
        class="rows-per-page-select body-1"
        :value="pagination.rowsPerPage"
        @input="setRowsPerPage"
        :items="rowsPerPageOptions.concat({ text: $t('all'), value: -1 })"
        offset-y
        color="primary"
        hide-details
      ></v-select>
    </v-flex>
    <v-flex md4 sm6 xs12 offset-md0 offset-sm1 offset-xs0 order-md3 order-sm2 order-xs2 class="text-xs-right">
      <span class="page-text">{{
        pagination.totalItems > 0 ? $t('pageText', [
          (pagination.page - 1) * pagination.rowsPerPage + 1,
          Math.min(pagination.page * pagination.rowsPerPage, pagination.totalItems),
          pagination.totalItems
        ]) : $t('pageTextZero')
      }}</span>
      <v-btn class="page-button" icon @click="prevPage"><v-icon>keyboard_arrow_left</v-icon></v-btn>
      <v-btn class="page-button" icon @click="nextPage"><v-icon>keyboard_arrow_right</v-icon></v-btn>
    </v-flex>
  </v-layout>
</template>

<script>

export default {
  name: 'ComponentTableActions',
  props: {
    pagination: {
      type: Object,
      required: true
    },
    search: {
      type: String,
      required: true
    },
    itemCount: {
      type: Number,
      required: true
    },
    rowsPerPageOptions: {
      type: Array,
      default: () => [10, 25, 50]
    }
  },
  data () {
    return {
    }
  },
  methods: {
    setRowsPerPage (value) {
      this.$emit('update:pagination', { ...this.pagination, rowsPerPage: value, page: 1 })
    },
    setPage (value) {
      this.$emit('update:pagination', { ...this.pagination, page: value })
    },
    setSearch (value) { this.$emit('update:search', value) },
    prevPage () {
      if (this.pagination.page > 1) this.setPage(this.pagination.page - 1)
    },
    nextPage () {
      if (this.pagination.page * this.pagination.rowsPerPage < this.pagination.totalItems) this.setPage(this.pagination.page + 1)
    }
  },
  created () {
    this.$emit('update:pagination', { ...this.pagination, totalItems: this.itemCount, rowsPerPage: this.rowsPerPageOptions[0] || -1 })
    this.setSearch('')
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.search-field {
  margin-top: 0;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 5px;
}
.rows-per-page-select {
  display: inline-block;
  margin: 0 10px 0 20px;
  width: min-content;
}
.page-text {
  margin-right: 20px;
}
.page-button {
  margin-top: 0;
  margin-bottom: 0;
}
</style>
