<template>
  <div>
    <div class="float-right" v-if="varient !== 'text'">
      <slot name="iconsArea">
        <b-button variant="link" @click="toggleCollapse">
          <icon
            name="dashboard-arrow-down"
            :class="{ 'mt-2': true, 'text-medium': true, 'rotate-ac-180': collapsing, 'rotate-ac-0': expanding }"
            :flip="collapsed !== true ? 'vertical' : null"
          />
        </b-button>
      </slot>
    </div>
    <component :is="varient === 'text' ? 'h6' : 'h5'">
      {{ title }}
    </component>
  </div>
</template>
<script>
export default {
  name: 'CardTitle',
  props: ['title', 'varient'],
  data() {
    return {
      collapsed: false,
      collapsing: false,
      expanding: false,
    }
  },
  mounted() {
    if (typeof jQuery === 'function') {
      this.collapsed = jQuery(this.$el)
        .closest('.card')
        .children('.card-body')
        .is(':hidden')
    } else {
      this.collapsed = !this.$el.target
        .closest('.card')
        .querySelector('.card-body')
        .classList.contains('show')
    }
  },
  methods: {
    toggleCollapse(e) {
      if (typeof jQuery === 'function') {
        let self = this
        let cardBody = jQuery(e.target)
          .closest('.card')
          .children('.card-body')
        this.collapsing = !cardBody.is(':hidden')
        this.expanding = cardBody.is(':hidden')
        cardBody.slideToggle('toggle', function() {
          self.collapsed = jQuery(this).is(':hidden')
          self.collapsing = false
          self.expanding = false
        })
      } else {
        this.collapsed = e.target
          .closest('.card')
          .querySelector('.card-body')
          .classList.toggle('show')
      }
    },
  },
}
</script>
