<template>
  <div>
    <b-card class="lifted h-100" :body-class="getCardBodyClass">
      <slot name="header">
        <div
          v-if="getTitle"
          :style="$helpers.getValue(cardData, 'title.containerStyle')"
          :class="$helpers.getValue(cardData, 'title.containerClass')"
        >
          <b-row class="m-0 align-items-center">
            <b-col v-if="getIconMeta.name" cols="auto" class="pr-0">
              <icon v-bind="getIconMeta" />
            </b-col>

            <b-col class="d-flex justify-content-between align-items-center">
              <h5 class="my-0 py-3 w-100" :class="getTitleClass">{{ getTitle }}</h5>
              <b-link
                v-if="$helpers.getValue(cardData, 'title.link')"
                :to="cardData.title.link"
                class="text-black stretched-link"
                :data-qa="`${dataQaPrefix}-customCardTemplate-linkHeader`"
              >
                <icon name="chevron-right" />
              </b-link>
            </b-col>
          </b-row>
        </div>
      </slot>

      <slot :context="getContext">
        <div v-for="(context, contextIndex) in getContext" :key="contextIndex">
          <slot name="subHeader">
            <div v-if="$helpers.getValue(context, 'subTitle.text')">
              <h5 class="mt-0 py-3" :class="$helpers.getValue(context, 'subTitle.class')">
                <span :class="{ 'font-weight-bolder': boldTitle }">{{ context.subTitle.text }}</span>
              </h5>
            </div>
          </slot>

          <slot :name="$helpers.getValue(context, 'slotName', 'body')" :context="context.items">
            <b-col :class="getBodyContextClass" :style="getCardBodyStyle">
              <b-row
                v-for="(rowData, index) in context.items"
                class="my-3"
                :key="`card-${index}`"
                :class="context.class"
              >
                <b-col
                  v-for="(colBodyData, colBodyIndex) in rowData"
                  :cols="Math.floor(12 / Math.max(...context.items.map(arr => arr.length)))"
                  :class="colBodyData.class"
                  :key="colBodyIndex"
                >
                  <slot :name="$helpers.getValue(colBodyData, 'slotName', 'colBody')" :value="colBodyData">
                    {{ colBodyData.text }}
                  </slot>
                </b-col>
              </b-row>
            </b-col>
          </slot>
        </div>
      </slot>

      <div v-if="getFooter.length > 0" class="border-top mb-3" :class="getFooterClass">
        <slot name="footer" :footer="getFooter">
          <b-row v-for="(footerData, index) in getFooter" :key="`footer-${index}`" class="mt-3 mx-0 font-weight-bold">
            <b-col
              v-for="(colFooterData, colFooterIndex) in footerData"
              :key="colFooterIndex"
              :class="colFooterData.class"
            >
              {{ colFooterData.text }}
            </b-col>
          </b-row>
        </slot>
      </div>
    </b-card>
  </div>
</template>
<script>
import Helper from '@/helpers'

/** E.g. Component Data Structure:
 cardData: {
  title: {
    text: String,
    link: String,
    icon: String,
    class: Object,
    iconClass: Object,
    iconStyle: Object,
    containerStyle: Object,
  },
  context: {
    data: [  #div
      {
        subtitle: { text: String, class: Object },
        items: [
          [  #row
            { text: String, class: Object }  #columns
          ]
      ],
        class: Object,
        slotName: String,
      },
    ],
    class: Object,
    style: Object,
  },
  footer: [{ text: String, class: Object }],
},
 **/

export default {
  name: 'CustomCardTemplate',
  props: {
    cardData: { type: Object, required: true },
    boldTitle: { type: Boolean, default: true },
    dataQaPrefix: { type: String, required: true },
  },
  data() {
    return {}
  },
  computed: {
    getIconMeta() {
      return {
        name: Helper.getValue(this.cardData, 'title.icon'),
        class: Helper.getValue(this.cardData, 'title.iconClass', []),
        style: Helper.getValue(this.cardData, 'title.iconStyle', {}),
      }
    },
    getTitle() {
      return Helper.getValue(this.cardData, 'title.text')
    },
    getTitleClass() {
      return [...Helper.getValue(this.cardData, 'title.class', []), { 'font-weight-bolder': this.boldTitle }]
    },
    getContext() {
      return Helper.getValue(this.cardData, 'context.data', [])
    },
    getBodyContextClass() {
      return Helper.getValue(this.cardData, 'context.class', [])
    },
    getFooter() {
      return Helper.getValue(this.cardData, 'footer', [])
    },
    getFooterClass() {
      return Helper.getValue(this.cardData, 'footer.class', [])
    },
    getCardBodyClass() {
      return ['p-0', ...Helper.getValue(this.cardData, 'class', [])]
    },
    getCardBodyStyle() {
      return Helper.getValue(this.cardData, 'style', '')
    },
  },
}
</script>

<style>
/*this class apply from parent component*/
.customBackgroundImage {
  background-repeat: no-repeat;
  background-size: 15vh;
  background-position: bottom right;
}
</style>
