<template>
  <div class="card mb-4">
    <div class="card-header">
      <card-title :title="$t('Dashboard.Landing.Card.WelcomeBonus.Title')" />
      <div class="px-4 pt-1 remove-gutter-1 clearfix">
        <icon name="dashboard-handshake" class="icon-size-4 text-primary fill-medium" />
        <big-currency class="float-right" :currency="currency" :price="welcomeBonusTotal" variant="large" />
      </div>
    </div>
    <div class="card-body border-top pt-0 collapse">
      <div class="divider px-4 remove-gutter-1">
        <b-row
          class="py-3 pl-1 divider"
          v-for="(bonus, index) in welcomeBonusData"
          :key="`welcome-bonus-data-${index}`"
        >
          <b-col class="pb-2">
            {{ typeof bonus.title !== 'undefined' ? bonus.title : 'Welcome Bonus Level ' + (index + 1) }}
          </b-col>
          <b-col class="text-right text-nowrap">
            <big-currency :currency="currency" :price="getPrice(bonus.price)" class="align-top" />
            <b-btn variant="link" class="py-1" @click="showWelcomeBonus(bonus)">
              <icon name="dashboard-arrow-right" class="text-primary align-top" />
            </b-btn>
          </b-col>
        </b-row>
      </div>
    </div>
    <b-modal
      v-model="showWelcomeBonusModal"
      :title="$t('Dashboard.Landing.Card.WelcomeBonus.LevelTitle', { level: activeWelcomeBonus })"
      hide-footer
      centered
      size="lg"
    >
      <div v-if="isLoading('welcomeBonusDetailLoading')" 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="getWelcomeBonusDetail.length === 0" class="text-center w-100 my-5">
        <h5>{{ $t('Common.RecordNotFound') }}</h5>
      </div>
      <div v-else>
        <b-container
          :class="{ 'nh-50': getWelcomeBonusDetail.length < 10, 'nh-75': getWelcomeBonusDetail.length >= 10 }"
          v-bar="vueSidebarConfig"
        >
          <div>
            <table class="table mb-5">
              <thead>
                <tr>
                  <th scope="col">{{ $t('Dashboard.Landing.Card.WelcomeBonus.Detail.No') }}</th>
                  <th scope="col">{{ $t('Common.IboId') }}</th>
                  <th scope="col">{{ $t('Common.IboName') }}</th>
                  <th scope="col">{{ $t('Dashboard.Landing.Card.WelcomeBonus.Detail.WPRank') }}</th>
                  <th scope="col" class="text-right">{{ $t('Dashboard.Landing.Card.WelcomeBonus.Detail.Bonus') }}</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(data, index) in getWelcomeBonusDetail" :key="`welcome-bonus-detail-${index}`">
                  <td>{{ index + 1 }}</td>
                  <td>{{ data.old_member_id }}</td>
                  <td>{{ data.name }}</td>
                  <td>{{ data.wp_rank }}</td>
                  <td class="text-right">{{ $helpers.getCurrencyValue(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: 'WelcomeBonus',
  components: { CardTitle, BigCurrency },
  props: ['welcomeBonusData', 'welcomeBonusTotal', 'currency'],
  data() {
    return {
      showWelcomeBonusModal: false,
      activeWelcomeBonus: '',
      vueSidebarConfig: {
        preventParentScroll: true,
        resizeRefresh: true,
      },
    }
  },
  methods: {
    ...mapActions(['loadWelcomeBonusDetail']),
    getPrice(price) {
      return price === undefined || price === null || price === '' ? '0.00' : price
    },
    showWelcomeBonus(bonus) {
      this.loadWelcomeBonusDetail(bonus.level)
      if (!this.showWelcomeBonusModal) {
        this.activeWelcomeBonus = bonus.level
      }
      this.showWelcomeBonusModal = !this.showWelcomeBonusModal
    },
  },
  computed: {
    ...mapGetters(['isLoading', 'getMemberDetails', 'getWelcomeBonusDetail']),
  },
}
</script>
