<template>
  <div class="divider remove-gutter-1 d-block">
    <div
      class="d-inline-block w-100 cv-info-card primary"
      v-if="$helpers.getValue(getCartCv, 'total_accumulated_base', 0) !== 0"
    >
      <div>
        <span class="float-right text-medium small"> {{ $t('Eshop.Product.CW') }} {{ getCartCwName }} </span>
        <div class="label">
          {{ $t('Eshop.Product.CV') }}
        </div>
        <div class="amount">
          {{ getCartCv.total_accumulated_eligible }}
        </div>
        <div class="info" v-if="cwForEligible > 0 && getCartUserNeedActivation">
          <div class="small">
            {{ $t('Eshop.Product.Active') }}
          </div>
          <div class="label float-right">
            {{ $t('Eshop.Product.CW') }}
          </div>
          <div class="label">
            {{ cwForEligible }}
          </div>
        </div>
      </div>
    </div>
    <!--
    Temporarily turned of due to GST-2462, When enabling this feture make sure to change the w-100 to w-50 on the
    above div
    --------------------------------------------------------------------------------------------------------------------
    *  <div                                                                                                            *
    *  -  class="d-inline-block w-100 cv-info-card primary pl-0"                                                       *
    *  +  class="d-inline-block w-50 cv-info-card primary pl-0"                                                        *
    *    v-if="$helpers.getValue(getCartCv, 'total_accumulated_base', 0) !== 0"                                        *
    *  >                                                                                                               *
    --------------------------------------------------------------------------------------------------------------------
    <div
      :class="[
        ['d-inline-block', 'w-50', 'cv-info-card', 'info-green'],
        { 'no-gutter-left': $helpers.getValue(getCartCv, 'total_accumulated_base', 0) !== 0 },
      ]"
      class="pl-0"
      v-if="$helpers.getValue(getCartCv, 'total_accumulated_amp', 0) !== 0"
    >
      <div>
        <span class="float-right text-medium small"> {{ $t('Eshop.Product.CW') }} {{ getCartCwName }} </span>
        <div class="label">
          {{ $t('Common.Terminology.AmpCv') }}
        </div>
        <div class="amount">
          {{ getCartCv.total_accumulated_amp }}
        </div>
        <div class="info" v-if="cwForAmp > 0">
          <div class="small">
            {{ $t('Eshop.Product.Active') }}
          </div>
          <div class="label float-right">
            {{ $t('Eshop.Product.CW') }}
          </div>
          <div class="label">
            {{ cwForAmp }}
          </div>
        </div>
      </div>
    </div>
    -->
    <div class="text-danger px-4 pt-2 text-left font-weight-bold" v-if="$helpers.getValue(getCartCv, 'break_down.cv')">
      {{ $t('Eshop.Rank.Type.CumulativePS', { cv: 30 }) }}
    </div>
    <div
      class="text-danger px-4 pb-2 text-left font-weight-bold"
      v-if="
        typeof getCartCv['total_accumulated_eligible'] !== 'undefined' &&
          getCartCv['total_accumulated_eligible'] < 30 &&
          cwForAmp === 0 &&
          getCartUserNeedActivation
      "
    >
      {{ $t('Eshop.Rank.Type.BecomeActive', { cv: 30 - getCartCv['total_accumulated_eligible'] }) }}
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'EshopCartBtnCvDisplay',
  computed: {
    ...mapGetters('eshop', ['getCartCv', 'getCartUserNeedActivation', 'getCartCwName']),
    cwForAmp() {
      return Math.floor((this.getCartCv.total_accumulated_amp || 0) / 30) * 2
    },
    cwForEligible() {
      return Math.min(Math.floor((this.getCartCv.total_accumulated_eligible || 0) / 30) * 2, 2)
    },
  },
}
</script>
