<template>
  <b-card header-class="pt-2 pb-0" class="mb-4">
    <template slot="header">
      <h5>
        <span>{{ $t('DashBoard.Landing.RankGoal.Title') }}</span>
        <b-button variant="link"><icon name="info-circle-icon" class="align-top"/></b-button>
      </h5>
    </template>

    <div v-if="!hasData" class="text-center text-primary m-lg-auto vh-25 pt-5">
      <b-spinner class="mx-2" />
      <strong class="h4">{{ $t('Common.Loading') }}</strong>
    </div>
    <div v-else>
      <div>
        <b-progress :max="getQualification.goal" height="2rem" class="rounded-pill pt-0" variant="info-green">
          <b-progress-bar :value="getQualification.current" class="animated fadeInLeft">
            <strong class="font-size-6 text-black pl-3  "
              >+ {{ $t('Dashboard.Landing.BV.Label', { bv: getQualification.current }) }}</strong
            >
          </b-progress-bar>
        </b-progress>
        <div class="d-flex justify-content-between pt-2 font-weight-bold">
          <span>
            {{
              $t('Dashboard.Landing.RankGoal.CurrentBv', {
                bv: getQualification.current,
              })
            }}</span
          >
          <span>
            {{
              $t('Dashboard.Landing.RankGoal.GoalBv', {
                bv: getQualification.goal,
              })
            }}</span
          >
        </div>
      </div>

      <b-row class="mt-5">
        <b-col cols="12" md="6" class="font-weight-bold text-medium">
          <div class="mb-4">
            <div>{{ $t('Dashboard.Landing.RankGoal.HighestRankAchieved') }}</div>
            <div class="font-weight-bold text-black text-capitalize">{{ getHighestRankAchieved }}</div>
          </div>
          <div class="mb-4">
            <div>{{ $t('Dashboard.Landing.RankGoal.CurrentLeftBv') }}</div>
            <div class="font-weight-bold text-black">{{ getCurrentBv.left }}</div>
          </div>
          <div class="mb-4">
            <div>{{ $t('Dashboard.Landing.RankGoal.CurrentRightBv') }}</div>
            <div class="font-weight-bold text-black">{{ getCurrentBv.right }}</div>
          </div>
        </b-col>
        <b-col cols="12" md="6">
          <b-card class="border h-100">
            <b-row>
              <b-col cols="7" class="font-size-5">
                <div class="font-weight-bold text-black-50">{{ $t('Dashboard.Landing.RankGoal.GoalRank') }}</div>
                <div class="font-weight-bold text-black text-capitalize">{{ getNextGoalRankZone }}</div>
              </b-col>
              <b-col cols="5">
                <!-- TODO: waiting for further instruction about the rank icon-->
              </b-col>
            </b-row>
            <div class="mt-4 font-weight-bold">
              <div class="text-medium pb-2">{{ $t('Dashboard.Landing.RankGoal.MustAchieve.Label') }}</div>
              <div class="d-flex">
                <icon
                  :name="getNextGoalRankQualificationAchievement ? 'check-circle' : 'times-circle'"
                  class="mr-2"
                  :class="getNextGoalRankQualificationAchievement ? 'text-info-green' : 'text-danger'"
                />
                <span>{{ $t('Dashboard.Landing.BV.Label', { bv: getQualification.goal }) }}</span>
              </div>
              <div class="d-flex mt-1">
                <icon
                  :name="getNextGoalRankActiveAchievement ? 'check-circle' : 'times-circle'"
                  class="mr-2"
                  :class="getNextGoalRankActiveAchievement ? 'text-info-green' : 'text-danger'"
                />
                <span class="font-weight-bold">{{
                  $t('Dashboard.Landing.ActiveStatusPv.Label', { pv: getActiveBv.goal })
                }}</span>
              </div>
            </div>
          </b-card>
        </b-col>
      </b-row>
    </div>
  </b-card>
</template>

<script>
import RankGoalMixin from '../../mixins/RankGoalMixin'
import _ from 'lodash'
export default {
  name: 'RankGoal',
  mixins: [RankGoalMixin],
  props: {
    rankGoalData: {
      type: Object,
      default: () => ({}),
    },
    highestRankAchieved: {
      type: String,
      default: '',
    },
  },
  computed: {
    achievementCheck() {
      let bvStatus = false
      let pvStatus = false
      if (this.getQualification.current !== 0 && this.getQualification.goal !== 0) {
        bvStatus = this.getQualification.goal - this.getQualification.current <= 0
      }
      if (this.getActiveBv.current !== 0 && this.getActiveBv.goal !== 0) {
        pvStatus = this.getActiveBv.goal - this.getActiveBv.current <= 0
      }
      return {
        bvStatus: bvStatus,
        pvStatus: pvStatus,
      }
    },
    hasData() {
      return !(
        _.isEmpty(this.rankGoalData.rank) &&
        _.isEmpty(this.rankGoalData.pv) &&
        _.isEmpty(this.rankGoalData.highest_rank)
      )
    },
    getHighestRankAchieved() {
      return this.highestRankAchieved || '-'
    },
  },
}
</script>
