<template>
  <div class="d-md-flex m-0">
    <template v-for="(stat, index) in stats">
      <b-col class="stat d-none d-md-flex" :key="`block-${index}`">
        <div class="card h-100 w-100 flex-row">
          <div class="col-3 text-white d-flex p-2 rounded-left" :class="['bg-' + stat.color]">
            <icon :name="stat.icon" :class="['icon-size-' + (stat.size || 3), 'm-auto']" />
          </div>
          <b-col class="d-flex info border border-left-0 rounded-right">
            <icon class="my-auto text-primary icon-size-4" name="spinner" pulse v-if="isLoading(stat.loading)" />
            <div v-else class="my-auto">
              <slot :name="stat.top_right_icon_slot_name || 'top_right_icon'" :stat="stat">
                <b-btn
                  variant="link"
                  v-if="
                    stat.top_right_icon !== undefined &&
                      $helpers.getValue(getMemberDetails, 'status.id') === memberStatusActiveId
                  "
                  :to="stat.path"
                  :class="['text-' + stat.color, 'pos-absolute-top-right']"
                >
                  <icon :name="stat.top_right_icon" />
                </b-btn>
              </slot>
              <div class="col-10 col-lg-auto p-0">
                <div class="font-weight-bold">
                  {{ stat.title }}
                </div>
                <div v-if="typeof stat.value === 'string'" class="h3 text-black m-0">
                  {{ stat.value }}
                </div>
                <animate-number v-if="typeof stat.value === 'number'" class="h3 text-black m-0" :number="stat.value" />
                <div class="small font-weight-bold">
                  {{ stat.description }}
                </div>
              </div>
            </div>
          </b-col>
        </div>
      </b-col>
    </template>
    <carousel :per-page="1" class="d-md-none" :loop="true" :pagination-padding="4">
      <slide v-for="(stat, index) in stats" :key="index" class="stat px-2">
        <div class="card h-100 w-100 flex-row">
          <div class="col-3 text-white d-flex rounded-left" :class="['bg-' + stat.color]">
            <icon :name="stat.icon" :class="['icon-size-' + (stat.size || 3), 'm-auto']" />
          </div>
          <b-col class="d-flex info border border-left-0 rounded-right">
            <slot :name="stat.top_right_icon_slot_name || 'top_right_icon'" :stat="stat">
              <b-button
                v-if="
                  stat.top_right_icon !== undefined &&
                    $helpers.getValue(getMemberDetails, 'status.id') === memberStatusActiveId
                "
                variant="link"
                :to="stat.path"
                :class="['text-' + stat.color, 'pos-absolute-top-right']"
              >
                <icon :name="stat.top_right_icon" />
              </b-button>
            </slot>
            <div class="my-auto">
              <div class="font-weight-bold">
                {{ stat.title }}
              </div>
              <div v-if="typeof stat.value === 'string'" class="h3 text-black m-0">
                {{ stat.value }}
              </div>
              <animate-number v-if="typeof stat.value === 'number'" class="h3 text-black m-0" :number="stat.value" />
              <div class="small font-weight-bold">
                {{ stat.description }}
              </div>
            </div>
          </b-col>
        </div>
      </slide>
    </carousel>
  </div>
</template>
<script>
import { Carousel, Slide } from 'vue-carousel'
import { mapGetters } from 'vuex'
import AnimateNumber from '@/app/_global/components/elements/AnimateNumber'
import { mapMasterDataId } from '@/app/_global/mixins'

export default {
  name: 'HomeStats',
  props: ['stats'],
  components: { Carousel, Slide, AnimateNumber },
  computed: {
    ...mapGetters(['isLoading', 'getMemberDetails']),
    ...mapMasterDataId({
      MEMBER_STATUS: {
        memberStatusActiveId: 'MEMBER_STATUS_ACTIVE',
      },
    }),
  },
}
</script>
