<template>
  <div class="card height-set">
    <div class="card-body">
      <h4 class="card-title">Sources Listing Table</h4>
      <div class="row mt-4">
        <template v-if="tableData.length">
          <!-- Search Bar Widget-->
          <div class="col-sm-12 col-md-2">
            <div id="tickets-table_filter" class="dataTables_filter">
              <label class="d-inline-flex align-items-center">
                Search:
                <b-form-input
                  v-model="filter"
                  type="search"
                  placeholder="Search..."
                  class="form-control form-control-sm ms-2"
                ></b-form-input>
              </label>
            </div>
          </div>
          <!-- Page Limit Widget-->
          <div class="col-sm-12 col-md-2">
            <div id="tickets-table_length" class="dataTables_length">
              <label class="d-inline-flex align-items-center">
                Show&nbsp;
                <b-form-select
                  class="form-select form-select-sm"
                  v-model="perPage"
                  size="sm"
                  :options="pageOptions"
                ></b-form-select
                >&nbsp;entries
              </label>
            </div>
          </div>
        </template>
        <!-- Add New Partnership Button-->
        <div
          :class="`col-sm-12 col-md-${
            tableData.length ? 8 : 12
          } text-md-end text-sm-start`"
        >
          <button
            type="button"
            class="
              btn btn-primary
              waves-effect waves-light
              btn-addNewPartnerShip
            "
            @click="$emit('add_new_source')"
          >
            Add New Source
          </button>
        </div>
      </div>
      <!-- Partnership List -->
      <template v-if="tableData.length">
        <div class="table-responsive mb-0">
          <b-table
            class="datatables"
            :items="tableData"
            :fields="fields"
            responsive="sm"
            :per-page="perPage"
            :current-page="currentPage"
            :sort-by.sync="sortBy"
            :sort-desc.sync="sortDesc"
            :filter="filter"
            :filter-included-fields="filterOn"
            @filtered="onFiltered"
            :bordered="true"
            thead-class="table-light"
          >
            <template #cell(action)="data">
              <button
                type="button"
                class="btn btn-light waves-effect"
                @click="selectSource(data.item)"
              >
                View
              </button>
            </template>
            <template #empty>
              <h4>No data</h4>
            </template>
          </b-table>
        </div>
        <div class="row">
          <div class="col">
            <div class="dataTables_paginate paging_simple_numbers float-end">
              <ul class="pagination pagination-rounded mb-0">
                <!-- pagination -->
                <b-pagination
                  v-model="currentPage"
                  :total-rows="rows"
                  :per-page="perPage"
                ></b-pagination>
              </ul>
            </div>
          </div>
        </div>
      </template>
      <no-data-component v-else></no-data-component>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex';
import {
  sourceListTableConfig,
  SOURCE_ACTION_GET_SOURCE_DETAILS,
} from '../constants';
import NoDataComponent from '../../../components/NoDataComponent.vue';
import { BFormInput,BFormSelect,BTable,BPagination} from 'bootstrap-vue-next'

export default {
  props: {
    sources: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      tableData: this.sources,
      ...sourceListTableConfig,
    };
  },
  computed: {
    rows() {
      return this.tableData.length;
    },
  },
  methods: {
    ...mapActions('source', {
      getSourceDetails: SOURCE_ACTION_GET_SOURCE_DETAILS,
    }),
    onFiltered(filteredItems) {
      // Trigger pagination to update the number of buttons/pages due to filtering
      this.totalRows = filteredItems.length;
      this.currentPage = 1;
    },
    selectSource(item) {
      if(item&&item.id)
      {
        this.getSourceDetails(item.id);
      }
      
    },
  },
  components: {
    NoDataComponent,
    BFormInput,BFormSelect,BTable,BPagination
  },
};
</script>