<template>
  <div class="card height-set">
    <div class="card-body">
      <h4 class="card-title">Workflow List</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="addNewWorkflow()"
          >
            Add New Workflow
          </button>
        </div>
      </div>
      <!-- Partnership List -->
      <div class="table-responsive mb-0">
        <b-table
          class="datatables"
          :items="filteredItems"
          :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"
          :hover="true"
          :striped="false"
          :busy="loading"
          :show-empty="true"
          sticky-header
        >
          <!-- Template for loader  -->
          <template #table-busy>
            <growing-loader></growing-loader>
          </template>
          <template #cell(is_active)="data">
            <span class="badge bg-info" v-if="data.item.isActive">YES</span>
            <span class="badge bg-danger" v-else>NO</span>
          </template>
          <template #cell(status)="data">
            <span class="badge bg-success" v-if="data.item.status === 1"
              >Ready</span
            >
            <span class="badge bg-warning" v-if="data.item.status === 0"
              >Warning</span
            >
          </template>
          <template #cell(action)="data">
            <button
              type="button"
              class="btn btn-light waves-effect"
              @click="selectWorkflow(data.item)"
            >
              Edit
            </button>
          </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>
    </div>
  </div>
</template>
<script>
import { listTableConfig } from '../constants';
import GrowingLoader from '../../../components/GrowingLoader.vue';
import { BTable } from 'bootstrap-vue-next';
import { BFormInput } from 'bootstrap-vue-next';
import { BFormSelect } from 'bootstrap-vue-next';
import { BPagination } from 'bootstrap-vue-next';

import _ from 'lodash';
export default {
  props: {
    workflows: {
      type: Array,
      required: true,
    },
    loading: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      tableData: this.workflows,
      ...listTableConfig,
    };
  },
  computed: {
    rows() {
      return this.tableData.length;
    },
    filteredItems() {
      // Perform case-insensitive search based on the search query
      const query = this.filter ? this.filter.toLowerCase() : '';
      console.log('filteredItems', this.tableData);

      if (this.tableData.length > 0) {
        console.log('filteredItems', this.tableData,query);
        if (query) {
          return this.tableData.filter(
            (item) =>
              item.name.toString().toLowerCase().includes(query) ||
              item.description.toString().toLowerCase().includes(query) ||
              item.type.toString().toLowerCase().includes(query),
          );
        } else {
          return this.tableData;
        }
      }
    },
  },
  methods: {
    onFiltered(filteredItems) {
      // Trigger pagination to update the number of buttons/pages due to filtering
      this.totalRows = filteredItems.length;
      this.currentPage = 1;
    },
    selectWorkflow(item) {
      console.log('itemmmmm', item.sid);
      this.$emit('onEdit', item.sid);
    },

    addNewWorkflow() {
      // this.$emit('onAddButtonClicked')
      this.$emit('onAddButtonClicked');
    },
  },
  components: {
    GrowingLoader,
    BTable,
    BFormInput,
    BFormSelect,
    BPagination,
  },
  watch: {
    workflows(v, prevV) {
      if (!_.isEqual(v, prevV)) {
        this.tableData = v;
      }
    },
  },
};
</script>