<template>
  <div class="card mb-4">
    <div class="card-header">
      <card-title :title="$t('Common.Terminology.MatchingBonus')" />
      <div class="px-4 pt-1 clearfix remove-gutter-1">
        <icon name="dashboard-hierarchy-o" class="icon-size-4 text-primary fill-medium" />
        <big-currency class="float-right" :currency="currency" :price="mentorBonusTotal" variant="large" />
      </div>
    </div>
    <div class="card-body pt-0 border-top collapse">
      <div class="py-3 pl-1 divider" v-for="(bonus, index) in mentorBonusData" :key="`member-bonus-data-${index}`">
        {{ bonus.title }}
        <b-btn variant="link" class="float-right pt-0" @click="showMentorBonus(bonus)">
          <icon name="dashboard-arrow-right" class="text-primary" />
        </b-btn>
        <big-currency class="float-right" :currency="currency" :price="bonus.price" />
      </div>
    </div>
    <b-modal
      v-model="showMentorBonusModal"
      :title="$t('Dashboard.Landing.Card.MentorBonus.LevelTitle', { level: activeMentorBonus })"
      hide-footer
      centered
      size="lg"
    >
      <div v-if="isLoading('mentorBonusDetailLoading')" class="vh-25 d-flex justify-content-center align-items-center">
        <icon name="spinner" pulse class="icon-size-4"></icon>
      </div>
      <div v-else-if="getMentorBonusDetail.length === 0" class="text-center w-100 my-5">
        <h5>{{ $t('Common.RecordNotFound') }}</h5>
      </div>
      <div v-else>
        <b-container
          :class="{ 'nh-50': getMentorBonusDetail.length < 10, 'nh-75': getMentorBonusDetail.length >= 10 }"
          v-bar="vueSidebarConfig"
        >
          <div>
            <table class="table mb-5">
              <thead>
                <tr>
                  <th scope="col">{{ $t('Common.Table.No') }}</th>
                  <th scope="col">{{ $t('Common.IboId') }}</th>
                  <th scope="col">{{ $t('Common.IboName') }}</th>
                  <th scope="col">{{ $t('Dashboard.Landing.Card.MentorBonus.Detail.QualifiedRank') }}</th>
                  <th scope="col">{{ $t('Dashboard.Landing.Card.MentorBonus.Detail.Bonus') }}</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(data, index) in getMentorBonusDetail" :key="`mentor-bonus-detail-${index}`">
                  <td>{{ index + 1 }}</td>
                  <td>{{ data.old_member_id }}</td>
                  <td>{{ data.name }}</td>
                  <td>{{ data.qualified_rank }}</td>
                  <td class="text-right">{{ data.bonus }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </b-container>
      </div>
    </b-modal>
  </div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
import BigCurrency from './BigCurrency'
import CardTitle from '@/app/_global/components/elements/CardTitle'

export default {
  name: 'MentorBonus',
  components: { CardTitle, BigCurrency },
  props: ['mentorBonusData', 'mentorBonusTotal', 'currency'],
  data() {
    return {
      showMentorBonusModal: false,
      activeMentorBonus: '',
      vueSidebarConfig: {
        preventParentScroll: true,
        resizeRefresh: true,
      },
    }
  },
  methods: {
    ...mapActions(['loadMentorBonusDetail']),
    getPrice(price) {
      return price === undefined || price === null || price === '' ? '0.00' : price
    },
    showMentorBonus(bonus) {
      this.loadMentorBonusDetail(bonus.level)
      if (!this.showMentorBonusModal) {
        this.activeMentorBonus = bonus.title
      }
      this.showMentorBonusModal = !this.showMentorBonusModal
    },
  },
  computed: {
    ...mapGetters(['isLoading', 'getMemberDetails', 'getMentorBonusDetail']),
  },
}
</script>
