<template>
  <div class="container-pagination">
    <p v-if="TfTable.showPageResults">
      Showing {{ countStart }}-{{ countEnd }} of {{ totalLength }}
    </p>
    <TfPagination
      v-if="TfTable.tableRowIndexes.length"
      v-bind="{
        isDisabled: !TfTable.isLoaded || TfTable.isSorting,
        totalPages: TfTable.totalPages,
        value: TfTable.localPageSelected,
        truncatedPageRange: TfTable.truncatedPageRange,
      }"
      @input="TfTable.onPageSelected"
    />
  </div>
</template>
<script>
  /**
   * TfTablePagination is a component that is used within the TfTable component and controls the template and logic for the table pagingation.
   *
   * @vuedoc
   * @exports TfTable/Pagination
   * @category Components
   */
  export default {
    name: 'TfTablePagination',
    inject: ['TfTable'],
    computed: {
      /**
       * Evaluate the page limit and localPageSelected to show the first result count in the template.
       *
       * @returns {number}
       */
      countStart() {
        return (
          (this.TfTable.localPageSelected * this.TfTable.pageLimit) - this.TfTable.pageLimit
        ) + 1;
      },
      /**
       * Evaluate the page limit and countStart to show the final result count in the template.
       *
       * @returns {number}
       */
      countEnd() {
        const countEnd = this.countStart + this.TfTable.pageLimit;

        return countEnd > this.totalLength
          ? this.totalLength
          : countEnd - 1;
      },
      /**
       * Cache the filteredTableDataIndexes from the parent to be used through the template and logic.
       *
       * @returns {number}
       */
      totalLength() {
        return this.TfTable.filteredTableDataIndexes.length;
      },
    },
  };
</script>

<style lang="scss" scoped>
  @import 'src/assets/styles/variables';

  .container-pagination {
    display: flex;
    align-items: center;
    margin-bottom: 15px;

    .table + &,
    .tf-table-footer + & {
      margin: {
        top: 15px;
        bottom: 0;
      }
    }
  }

  .pagination-container {
    margin-left: auto;
  }

  p {
    margin-bottom: 0;
    color: $tf-medium-gray;
  }
</style>
