<template>
  <div class="card mb-4">
    <div class="card-header divider">
      <card-title varient="text" :title="$t('Dashboard.Landing.Card.Snapshot.Title')" />
    </div>
    <div class="card-body py-4">
      <b-row class="py-2" v-for="(snapshot, index) in snapshotsData" :key="`snapshot-data-${index}`">
        <b-col cols="9" class="text-left">
          <h6 class="text-medium text-black">{{ snapshot.title }}</h6>
        </b-col>
        <b-col cols="3" class="text-right">
          <b-link
            v-if="snapshot.title === 'Brand Ambassador (Inactive)' && snapshot.value > 0"
            :title="$t('Dashboard.Landing.Card.Snapshot.ShowRankDetail', { name: snapshot.title })"
            @click="showSnapshotDetail(snapshot)"
          >
            <h6 class="text-danger">
              <u>{{ snapshot.value }}</u>
            </h6>
          </b-link>
          <h6 v-else class="text-medium text-black">{{ snapshot.value }}</h6>
        </b-col>
      </b-row>
    </div>
    <b-modal
      v-model="showBrandAmbassadorModal"
      title="Brand Ambassador (Inactive)"
      hide-footer
      no-close-on-esc
      centered
      size="md"
    >
      <div v-if="isLoading('baInactiveDetailLoading')" class="vh-25 d-flex justify-content-center align-items-center">
        <icon name="spinner" pulse class="icon-size-4"></icon>
      </div>
      <div v-else>
        <div v-if="getBaInactiveDetail.length === 0" class="text-center w-100 my-5">
          <h5>{{ $t('Common.RecordNotFound') }}</h5>
        </div>
        <div v-else>
          <b-input-group
            class="eshop mb-2"
            v-if="getBaInactiveDetail.length > baInactiveDetailSize"
            @keyup.13="searchBaInactiveList"
            @keyup.27="removeSearchBaInactiveList"
          >
            <b-form-input
              v-model="searchBaInactive"
              :placeholder="$t('Genealogy.PlacementTreeDiagram.Search.SearchDownline')"
              :title="$t('OrderHistory.EnterToSearch')"
            ></b-form-input>
            <b-input-group-append>
              <b-btn
                v-if="searchedMemberId !== ''"
                variant="link"
                @click="removeSearchBaInactiveList"
                class="border-light pt-2"
              >
                <icon name="clear-icon" class=""></icon>
              </b-btn>
              <b-btn variant="primary" @click="searchBaInactiveList">
                <icon name="search"></icon>
              </b-btn>
            </b-input-group-append>
          </b-input-group>
          <b-container
            :class="{ 'nh-50': getBaInactiveDetail.length < 10, 'nh-75': getBaInactiveDetail.length >= 10 }"
            v-bar="vueSidebarConfig"
          >
            <div>
              <table class="table mb-5">
                <thead>
                  <tr>
                    <th scope="col">{{ $t('Dashboard.Landing.Card.Snapshot.Detail.No') }}</th>
                    <th scope="col">{{ $t('Common.IboId') }}</th>
                    <th scope="col">{{ $t('Common.IboName') }}</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(data, index) in getPaginatedBaInactiveDetail" :key="`paginated-ba-inactive-${index}`">
                    <td>{{ (currentBaInactivePageHistory - 1) * baInactiveDetailSize + index + 1 }}</td>
                    <td>{{ data.ibo_id }}</td>
                    <td>{{ data.ibo_name }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </b-container>
          <b-pagination
            v-if="getBaInactiveDetailData.length > baInactiveDetailSize"
            class="mt-1"
            align="center"
            size="sm"
            hide-ellipsis
            :total-rows="getBaInactiveDetailData.length"
            v-model="currentBaInactivePageHistory"
            @change="handlePaginationChange"
            :per-page="baInactiveDetailSize"
          >
          </b-pagination>
        </div>
      </div>
    </b-modal>
  </div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
import CardTitle from '@/app/_global/components/elements/CardTitle'

export default {
  name: 'MemberSnapshot',
  components: { CardTitle },
  props: ['snapshotsData'],
  data() {
    return {
      showBrandAmbassadorModal: false,
      activeSnapshot: '',
      baInactiveDetailSize: window.screen.height > 800 ? 15 : 10,
      currentBaInactivePageHistory: 1,
      searchBaInactive: '',
      searchedMemberId: '',
      vueSidebarConfig: {
        preventParentScroll: true,
        resizeRefresh: true,
      },
    }
  },
  methods: {
    ...mapActions(['loadBaInactiveDetail']),
    getBaInactiveDetailData() {
      if (this.searchedMemberId !== '') {
        let needle = this.searchedMemberId.toLowerCase()
        return this.getBaInactiveDetail.filter(
          item =>
            item.ibo_id
              .toString()
              .toLowerCase()
              .indexOf(needle) >= 0 ||
            item.ibo_name
              .toString()
              .toLowerCase()
              .indexOf(needle) >= 0
        )
      } else {
        return this.getBaInactiveDetail
      }
    },
    getPaginatedBaInactiveDetail() {
      let offset = (this.currentBaInactivePageHistory - 1) * this.baInactiveDetailSize
      return this.getBaInactiveDetailData.slice(offset).slice(0, this.baInactiveDetailSize)
    },
    showSnapshotDetail(snapshot) {
      this.removeSearchBaInactiveList()
      this.loadBaInactiveDetail()
      if (!this.showBrandAmbassadorModal) {
        this.activeSnapshot = snapshot
      }
      this.showBrandAmbassadorModal = !this.showBrandAmbassadorModal
    },
    handlePaginationChange(page) {
      this.currentBaInactivePageHistory = page
    },
    searchBaInactiveList() {
      this.searchedMemberId = this.searchBaInactive
    },
    removeSearchBaInactiveList() {
      this.searchBaInactive = ''
      this.searchedMemberId = ''
    },
  },
  computed: {
    ...mapGetters(['isLoading', 'getMemberDetails', 'getBaInactiveDetail']),
  },
}
</script>
