<template>
  <div class="ais-card w-full" :class="cardClasses">

    <div v-if="hasHeader"
         class="ais-card-header"
         :class="headerClasses"
         @click="handleHeaderClick"
    >
      <slot name="header" :open="open">{{ header }}</slot>
    </div>

    <slot v-if="show && noBody"></slot>

    <AisCardBody v-else-if="show" class="ais-card-body">
      <slot></slot>
    </AisCardBody>

    <div v-if="show && hasFooter" class="ais-card-footer" :class="footerClasses">
      <slot name="footer">{{ footer }}</slot>
    </div>

  </div>
</template>

<script setup>
  import { getCardClasses, getHeaderClasses, getBodyClasses, getFooterClasses } from "./card-util";
  import { computed, provide, ref, useSlots } from 'vue'
  import { expectedValues } from '@/util/prop-validators'
  import AisCardBody from "@/components/card/AisCardBody.vue";

  const open = ref(props.defaultOpen)

  const props = defineProps({
      collapsible: { type: Boolean, default: () => false },
      noBody: { type: Boolean, default: () => false },
      defaultOpen: { type: Boolean, default: () => true },


    /**
       * Applies one of the color variants to the body background
       */
      bodyBgVariant: { type: String, default: () => '' },

      /**
       * Applies one of the color variants to the body border
       */
      bodyBorderVariant: { type: String, default: () => '' },

      /**
       * Applies one of the color variants to the body text
       */
      bodyTextVariant: { type: String, default: () => '' },

      /**
       * CSS class (or classes) to apply to the body
       */
      bodyClass: { type: [String, Object, Array], default: () => '' },

      /**
       * Applies one of the color variants to the header background
       */
      headerBgVariant: { type: String, default: () => '' },

      /**
       * Applies one of the color variants to the header border
       */
      headerBorderVariant: { type: String, default: () => '' },

      /**
       * Applies one of the color variants to the header text
       */
      headerTextVariant: { type: String, default: () => '' },

      /**
       * Text content to place in the header
       */
      header: { type: String, default: () => '' },

      /**
       * CSS class (or classes) to apply to the header
       */
      headerClass: { type: [String, Object, Array], default: () => '' },

      /**
       * Applies one of the color variants to the footer background
       */
      footerBgVariant: { type: String, default: () => '' },

      /**
       * Applies one of the color variants to the footer border
       */
      footerBorderVariant: { type: String, default: () => '' },

      /**
       * Applies one of the color variants to the footer text
       */
      footerTextVariant: { type: String, default: () => '' },

      /**
       * Text content to place in the footer
       */
      footer: { type: String, default: () => '' },

      /**
       * CSS class (or classes) to apply to the footer
       */
      footerClass: { type: [String, Object, Array], default: () => '' },

      /**
       * Applies one of the color variants to the background
       */
      bgVariant: { type: String, default: () => '' },

      /**
       * Applies one of the color variants to the border
       */
      borderVariant: { type: String, default: () => '' },

      /**
       * Applies one of the color variants to the text
       */
      textVariant: { type: String, default: () => '' },

      /**
       * Text alignment for the card's content: 'left', 'center' or 'right'
       */
      align: { type: String, default: () => 'left', validator: expectedValues('left', 'center', 'right') },
  })

  const emit = defineEmits(['click'])

  const alignClass = computed( () => {
    switch(props.align) {
      case 'center':
        return 'text-center'
      case 'right':
        return 'text-right'
      default:
        return 'text-left'
    }
  })
  const hasHeader = computed( () => !!useSlots().header || !!props.header)
  const hasFooter = computed( () => !!useSlots().footer || !!props.footer)
  const cardClasses = computed(() => getCardClasses(props, alignClass.value, open.value))
  const headerClasses = computed(() => getHeaderClasses(props, open.value))
  const bodyClasses = computed(() => getBodyClasses(props))
  const footerClasses = computed(() => getFooterClasses(props))

  const show = computed(() => !props.collapsible || open.value)

  const handleHeaderClick = () => {
    if(props.collapsible) {
      open.value = !open.value
      emit('click', open.value)
    }
  }

  provide( 'bodyClasses', computed(() => bodyClasses.value) )

</script>

<script>
    export default {
        name: "AisCard"
    }
</script>