<template>
  <b-col :class="getComponentClass">
    <div class="h-100 card mb-4" :class="cardClass">
      <slot name="header">
        <div class="card-header">
          <h5>
            <span>{{ getMainTitle }}</span>
          </h5>
          <div v-if="getDescription" :class="$helpers.getValue(this.getDescription, 'descriptionClass', [])">
            <span>{{ $helpers.getValue(this.getDescription, 'text', '') }}</span>
          </div>
        </div>
      </slot>

      <div
        v-if="!isBusy && getCardsList.length > 0"
        class="mx-4 d-flex text-black pb-4 flex-wrap flex-md-nowrap align-item-stretch pt-2"
      >
        <template v-for="(item, index) in getCardsList">
          <div class="w-100" :key="index">
            <span class="h5 text-black-50">{{ $helpers.getValue(item, 'title', '') }}</span>
            <b-card
              class="border mt-1 h-100"
              :body-class="['d-flex', 'flex-column']"
              :footer-class="$helpers.getValue(item, 'footer.footerClass', [])"
            >
              <!--                Card Body-->
              <slot name="cardBody" :item="item">
                <b-row v-if="$helpers.getValue(item, 'status')" class="text-center">
                  <template v-for="(status, StatusIndex) in $helpers.getValue(item, 'status')">
                    <b-col :class="$helpers.getValue(status, 'statusClass', [])" :key="StatusIndex">
                      <div class="mb-2">{{ $helpers.getValue(status, 'title', '') }}</div>
                      <b-row class="mx-0" :class="$helpers.getValue(status, 'state.stateClass', [])">
                        <template v-for="(n, idx) in $helpers.getValue(status, 'state.value', [])">
                          <div class="circle-icon" :class="statusClass(status, idx)" :key="idx">
                            <div class="status-circle border-info-green ml-1 " :class="{ 'bg-info-green': n }"></div>
                          </div>
                        </template>
                      </b-row>
                    </b-col>
                  </template>
                </b-row>
                <div class="mt-auto">
                  <div class="text-medium font-weight-bold pb-2">
                    {{ $helpers.getValue(item, 'body.title', '') }}
                  </div>
                  <div
                    :key="idx"
                    :class="{
                      'align-items-center flex-column text-center': $helpers.getValue(item, 'status').length === 0,
                    }"
                    v-for="(n, idx) in $helpers.getValue(item, 'body.blocks', [])"
                    class="d-flex pb-1"
                  >
                    <icon
                      v-if="$helpers.getValue(n, 'icon')"
                      :name="$helpers.getValue(n, 'icon')"
                      :class="{
                        [$helpers.getValue(n, 'iconColor')]: true,
                        'icon-size-4': $helpers.getValue(item, 'status').length === 0,
                      }"
                      class="mr-2"
                    />
                    <span
                      :class="{ 'pt-2 text-wrap w-75': $helpers.getValue(item, 'status').length === 0 }"
                      class="font-weight-bold text-capitalize"
                      >{{ $helpers.getValue(n, 'text', '') }}</span
                    >
                  </div>
                </div>
              </slot>
              <!--                Card Footer-->
              <template slot="footer" v-if="$helpers.getValue(item, 'footer.text')">
                <slot name="footer">
                  <span>{{ $helpers.getValue(item, 'footer.text') }}</span>
                </slot>
              </template>
            </b-card>
          </div>

          <!--            Splitter-->
          <template v-if="index < getCardsList.length - 1">
            <!--        Tablet above mode-->
            <div
              class="flex-shrink-1 align-self-center px-1 text-primary d-none d-md-flex mt-5"
              :key="`${index}-big-screen`"
            >
              <icon v-if="getSplitter" :name="getSplitter" />
            </div>
            <!--        Mobile mode-->
            <div class="w-100 text-center mt-5 text-primary rotate-c-90 d-md-none" :key="`${index}-small-screen`">
              <icon v-if="getSplitter" :name="getSplitter" />
            </div>
          </template>
        </template>
      </div>

      <div v-else 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>
  </b-col>
</template>

<script>
import Helpers from '@/helpers'
export default {
  name: 'ResponsiveCardGroup',
  props: {
    componentData: {
      type: Object,
      required: true,
    },
    isBusy: {
      type: Boolean,
      default: false,
    },
    cardClass: {
      type: [String, Array],
      default: () => [],
    },
  },
  methods: {
    statusClass(status, index) {
      return (
        (this.$helpers.getValue(status, 'state.value', []).length > 1 &&
          index === 0 && ['d-flex pb-1 w-100', ...this.$helpers.getValue(status, 'state.stateClass', [])]) ||
        []
      )
    },
  },
  computed: {
    getMainTitle() {
      return Helpers.getValue(this.componentData, 'title', '')
    },
    getDescription() {
      return Helpers.getValue(this.componentData, 'description')
    },
    getCardsList() {
      return Helpers.getValue(this.componentData, 'cards', [])
    },
    getSplitter() {
      return Helpers.getValue(this.componentData, 'splitterIcon')
    },
    getComponentClass() {
      return Helpers.getValue(this.componentData, 'componentClass', [])
    },
  },
}
</script>
