<template>
  <div class="height-set">
    <div class="spinner-main">
      <Loader :loading="widgetLoading"> </Loader>
    </div>
    <template v-if="!widgetLoading">
      <div class="card height-set">
        <div class="card-body">
          <h4 class="card-title">Accounts Table</h4>
          <div class="row mt-4">
            <!-- 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>

            <!-- Add New Partnership Button-->
            <div class="col-sm-12 col-md-8 text-md-end text-sm-start">
              <button
                type="button"
                class="
                  btn btn-primary
                  waves-effect waves-light
                  btn-addNewPartnerShip
                "
                @click="onAddButtonClicked"
              >
                Add New Account
              </button>
            </div>
          </div>
          <!-- Partnership List -->
          <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="selectAccount(data.item.sid)"
                >
                  View
                </button>
              </template>
              <template #cell(status)="data">
                <span
                  class="badge ms-1"
                  :class="{
                    'bg-success': data.item.active === true,
                    'bg-danger': data.item.active === false,
                  }"
                  >{{
                    data.item.active === true ? 'active' : 'deactivated'
                  }}</span
                >
              </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 v-if="showEditModal">
        <edit-account
          @refetchAccounts="$emit('refetchAccounts')"
          :selectedAccount="selectedAccount"
          :addEditLoading="addEditLoading"
          @setErrorMessage="setErrorMessage"
          @formSubmit="formSubmit"
          @closeAddEditModal="closeAddEditModal"
          :timeZones="timeZones"
          :billing_types="billing_types"
          :business_types="business_types"
          :partnershipDetails="partnershipDetails"
        ></edit-account>
      </template>
    </template>
  </div>
</template>
<script>
import Loader from '../../components/Loader/loader.vue';
import PartnershipAcountService from '../../service/partnershipAcountService';
import PartnershipService from '../../service/partnershipSettingsService';
import MainService from '../../service/mainService';
import EditAccount from './Edit.vue';
import { toastConfig } from '../../utils/util';
import {
  billing_types,
  business_types,
  tableConfigurations,
} from './constants';
import * as _ from 'lodash';
import { I } from 'caniuse-lite/data/agents';
import { BFormInput,BFormSelect,BTable,BPagination } from 'bootstrap-vue-next';

export default {
  data() {
    return {
      partnershipDetails: null,
      timeZones: [],
      timeZonesLoading: false,
      partnershipDetailsloading: false,
      showEditModal: false,
      billing_types,
      business_types,
      accountsLoading: false,
      addEditLoading: false,
      selectedAccount: null,

      tableData: [],
      ...tableConfigurations,
    };
  },
  mounted() {
    this.getPartnershipAccounts();
    this.getTimeZones();
    this.getPartnershipDetails();
  },
  computed: {
    rows() {
      return this.tableData.length;
    },
    widgetLoading() {
      return (
        this.accountsLoading ||
        this.timeZonesLoading ||
        this.partnershipDetailsloading
      );
    },
  },
  methods: {
    getPartnershipDetails() {
      this.partnershipDetailsloading = true;
      PartnershipService.getPartnerSettings()
        .then(({ data: { success, message, data } }) => {
          if (success) {
            this.partnershipDetailsloading = false;
            this.partnershipDetails = data;
          } else {
            this.setErrorMessage(message);
            this.partnershipDetailsloading = false;
          }
        })
        .catch((e) => {
          this.partnershipDetailsloading = false;
          this.setErrorMessage(
            'Something went wrong while fetching partnership details!',
          );
        });
    },
    getTimeZones() {
      this.timeZonesLoading = true;
      MainService.getTimeZones()
        .then(({ data: { success, message, data } }) => {
          if (success) {
            this.timeZonesLoading = false;
            this.timeZones = data;
          } else {
            this.setErrorMessage(message);
            this.timeZonesLoading = false;
          }
        })
        .catch((e) => {
          this.timeZonesLoading = false;
          this.setErrorMessage(
            'Something went wrong while fetching time zones!',
          );
        });
    },
    setErrorMessage(m) {
      this.$toast.open(toastConfig.toastError(m));
    },
    formSubmit(formData) {
      if (this.selectedAccount === null) {
        this.addEditLoading = true;
        PartnershipAcountService.createPartnershipAccounts(formData)
          .then(({ data: { success, message, data } }) => {
            if (success) {
              this.addEditLoading = false;
              this.$toast.open(toastConfig.toastSuccess(message));
              this.showEditModal = false;
              this.getPartnershipAccounts();
              this.selectedAccount = null;
            } else {
              this.$toast.open(toastConfig.toastError(message));
              this.addEditLoading = false;
            }
          })
          .catch((e) => {
            this.addEditLoading = false;
            this.$toast.open(
              toastConfig.toastError(
                'Something went wrong while adding partnership account!',
              ),
            );
          });
      } else {
        this.addEditLoading = true;
        PartnershipAcountService.updatePartnershipAccount(
          formData,
          this.selectedAccount,
        )
          .then(({ data: { success, message } }) => {
            if (success) {
              this.addEditLoading = false;
              this.$toast.open(toastConfig.toastSuccess(message));
              this.showEditModal = false;
              this.getPartnershipAccounts();
              this.selectedAccount = null;
            } else {
              this.$toast.open(toastConfig.toastError(message));
              this.addEditLoading = false;
            }
          })
          .catch((e) => {
            this.addEditLoading = false;
            this.$toast.open(
              toastConfig.toastError(
                'Something went wrong while updating partnership account!',
              ),
            );
          });
      }
      console.log(formData);
    },
    onFiltered(filteredItems) {
      // Trigger pagination to update the number of buttons/pages due to filtering
      this.totalRows = filteredItems.length;
      this.currentPage = 1;
    },
    onAddButtonClicked() {
      console.log(" Add New Workflow1")
      this.showEditModal = true;
    },
    closeAddEditModal() {
      this.showEditModal = false;
      this.selectedAccount = null;
    },
    selectAccount(accountId) {
      this.selectedAccount = accountId;
      this.showEditModal = true;
    },
    getPartnershipAccounts() {
      this.accountsLoading = true;
      PartnershipAcountService.getPartnershipAccounts()
        .then(({ data: { success, message, data } }) => {
          if (success) {
            // console.log(success, message, data);
            // this.$toast.open(toastConfig.toastSuccess(message));
            this.accountsLoading = false;
            this.tableData = _.map(data, (d) => ({
              ...d,
              business_type: _.find(
                this.business_types,
                ({ value }) => value === d.business_type,
              ).label,
              billing_type: _.find(
                this.billing_types,
                ({ value }) => value === d.billing_type,
              ).label,
            }));
          } else {
            this.$toast.open(toastConfig.toastError(message));
            this.accountsLoading = false;
          }
        })
        .catch((e) => {
          this.accountsLoading = false;
          this.$toast.open(
            toastConfig.toastError(
              'Something went wrong while fetching partnership list!',
            ),
          );
          console.log('error', e);
        });
    },
  },
  components: {
    EditAccount,
    Loader,
    BFormInput,BFormSelect,BTable,BPagination 
  },
};
</script>