<template>
  <div class="spinner-main">
    <growing-loader :isMini="true" v-if="loading"></growing-loader>
  </div>
  <div class="card height-set">
    <div class="card-body border-bottom">
      <div class="d-flex justify-content-between align-items-center">
        <h4 class="card-title">Users Lists</h4>
        <button
          type="button"
          class="btn btn-primary waves-effect waves-light btn-addNewPartnerShip"
          @click="addNewJobs()"
        >
          Add New User
        </button>
      </div>
    </div>
    <div class="card-body border-bottom">
      <div class="row mt-2">
        <template v-if="tableData.length">
          <div class="col-lg-6 col-xxl-4">
            <div id="tickets-table_filter" class="dataTables_filter">
              <label class="d-inline-flex align-items-center w-100">
                <b-form-input
                  v-model="filter"
                  type="search"
                  placeholder="Search for..."
                  class="form-control form-control-sm input-height"
                ></b-form-input>
              </label>
            </div>
          </div>
        </template>
      </div>
    </div>
    <div class="card-body border-bottom">
      <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"
          :bordered="true"
          thead-class="table-white"
          :hover="true"
          :striped="false"
          :busy="loading"
          :show-empty="true"
          sticky-header
        >
          <template #table-busy>
            <growing-loader></growing-loader>
          </template>

          <template #cell(no)="data">
            <span style="font-weight: 600">
              {{ (currentPage - 1) * perPage + data.index + 1 }}
            </span>
          </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"
              title="Edit"
              class="btn btn-light waves-effect"
              @click="selectWorkflow(data.item)"
              data-toggle="tooltip"
            >
              Edit
            </button>

            <button
              type="button"
              title="Delete"
              class="btn btn-light waves-effect"
              @click="deleteItem(data.item)"
              data-toggle="tooltip"
              style="margin-left: 5px"
            >
              Delete
            </button>
          </template>
        </b-table>
      </div>

      <div class="row">
        <div class="col d-flex justify-content-between align-items-center">
          <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 class="dataTables_paginate paging_simple_numbers float-end">
            <ul class="pagination pagination-rounded mb-0">
              <b-pagination
                v-model="currentPage"
                :total-rows="rows"
                :per-page="perPage"
              ></b-pagination>
            </ul>
          </div>
        </div>
      </div>

      <confirm-delete-popup
      v-if="showConfirmDelete"
      @confirm="deleteUser"
      @cancel="cancelDelete"
    />
    </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 { Icon } from "@iconify/vue";
import ConfirmDeletePopup from "./ConfirmDeletePopup.vue";

import _ from "lodash";
export default {
  emits: ["onEdit", "onAddButtonClicked", "onDelete"],
  props: {
    workflows: {
      type: Array,
      required: true,
    },
    loading: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      tableData: this.workflows,
      filter: null,
      deletId:"",
      showConfirmDelete: false,

      ...listTableConfig,
    };
  },
  computed: {
    rows() {
      return this.tableData.length;
    },
    filteredItems() {
      // Perform case-insensitive search based on the search query
      const query = this.filter ? this.filter.toLowerCase() : "";

      if (query) {
        return this.tableData.filter(
          (item) =>
            item.email.toString().toLowerCase().includes(query) ||
            item.firstname.toString().toLowerCase().includes(query) ||
            item.lastname.toString().toLowerCase().includes(query) ||
            item.phonenumber.toString().toLowerCase().includes(query) ||
            item.id.toString().toLowerCase().includes(query)
        );
      } else {
        return this.tableData;
      }
    },
 

  },
  methods: {
    
    selectWorkflow(item) {
      this.$emit("onEdit", item.id);
    },

    deleteItem(item) {
      this.deletId = item.id
       this.showConfirmDelete =true
    },

    deleteUser()
    {
      this.showConfirmDelete =false
      this.$emit("onDelete",  this.deletId);

    },
    cancelDelete()
    {
      this.showConfirmDelete =false
    },

    addNewJobs() {
      this.$emit("onAddButtonClicked");
    },
  },
  components: {
    GrowingLoader,
    BTable,
    BFormInput,
    BFormSelect,
    BPagination,
    Icon,
    ConfirmDeletePopup,
  },
  watch: {
    workflows(v, prevV) {
      if (!_.isEqual(v, prevV)) {
        this.tableData = v;
      }

    },
  },
};
</script>