<template>
  <modal-template :is-footer-hide="true">
    <div slot="title" ref="title">
      {{ $t('TVCPercentageLevel.Title') }}
    </div>

    <div slot="body">
      <b-overlay :show="isBusy" variant="white" :class="[{ 'vh-25': isBusy }]" opacity="0.96">
        <template v-slot:overlay>
          <b-spinner class="mx-2 text-primary" />
          <strong class="h4 text-primary">{{ $t('Common.Loading') }}</strong>
        </template>

        <div class="eshop transparent-stepped divider">
          <stepped
            :steps="getTvcRankInfo.ranks"
            class="w-100 my-3 overflow-hidden"
            center
            :active-step="null"
            :progresses="connectorColor"
          >
            <template slot="indicatorValue" slot-scope="scope">
              <div class="circle-icon">
                <div
                  class="tvc-circle m-auto"
                  :style="{ 'background-color': '#' + $helpers.getValue(scope, 'text.color_hex_code', '1699df') }"
                >
                  <b-row align-v="center" class="h-100">
                    <b-col>
                      <span class="font-size-4 text-white">{{ $t('TVC.label') }}</span>
                      <h1 class="font-weight-bolder text-white">
                        <span>{{ $helpers.getValue(scope, 'text.tvc_entitlement_percentage', 'N/A') }}%</span>
                      </h1>
                    </b-col>
                  </b-row>
                </div>
              </div>
            </template>

            <template slot="textArea" slot-scope="scope">
              <div class="pt-3">
                <h4 class="text-black font-weight-bold mb-0">
                  {{ $helpers.getValue(scope, 'text.rank_name', '-') }}
                </h4>
                <div class="font-size-5">
                  <span>&ge;</span>
                  <span>
                    {{ $t('Dashboard.Landing.BV.Label', { bv: $helpers.getValue(scope, 'text.bv', 'N/A') }) }}
                  </span>
                </div>
              </div>
            </template>
          </stepped>
        </div>

        <div class="mt-3">
          <ul class="list-style-asterix col-12">
            <li v-for="(criteria, index) in getTvcRankInfo.criterias" :key="index" v-html="criteria" class="pb-1" />
          </ul>
        </div>
      </b-overlay>
    </div>
  </modal-template>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { getValue } from '@/helpers/variable-handling'
import Stepped from '@/app/_global/components/elements/Stepped'
import ModalTemplate from '@/elements/common/components/modalTemplate'

export default {
  name: 'TvcInfoModal',
  components: { Stepped, ModalTemplate },
  computed: {
    ...mapGetters(['getTvcRankInfo', 'isLoading']),
    connectorColor() {
      return getValue(this.getTvcRankInfo, 'ranks', []).map((rank, idx) => ({
        index: idx,
        value: 100,
        lineColor: '#' + rank.color_hex_code || '00000',
      }))
    },
    isBusy() {
      return this.isLoading('loadingTvcRankInfo')
    },
  },
  methods: {
    ...mapActions(['loadTvcRankInfo']),
    show() {
      if (!this.getTvcRankInfo.ranks) {
        this.loadTvcRankInfo()
      }
      this.$bvModal.show('modal')
    },
  },
}
</script>
