<template>
  <Disclosure :as="as" :defaultOpen="defaultOpen" v-slot="{ open }">

    <DisclosureButton :as="bttnAs" :class="bttnClasses">
      <slot name="button" :open="open">{{ bttnText }}</slot>
    </DisclosureButton>

    <transition
        :enter-active-class="enter"
        :enter-from-class="enterFrom"
        :enter-to-class="enterTo"
        :leave-active-class="leave"
        :leave-from-class="leaveFrom"
        :leave-to-class="leaveTo"
    >
      <DisclosurePanel v-show="open || alwaysOpen" :class="panelClasses" static>
        <slot name="default">Toggleable content goes here</slot>
      </DisclosurePanel>
    </transition>

  </Disclosure>
</template>

<script setup>
  import { computed } from 'vue'
  import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
  import { classToArray } from "../../util/class-util";
   import { transitionProps } from "@/util/transition-props";

  const props = defineProps({
      modelValue: {type: Number, required: false, default: () => 1},
      as: { type: [String, Object], default: () => 'template' },
      defaultOpen: { type: Boolean, default: () => false },
      alwaysOpen: { type: Boolean, default: () => false },
      bttnClass: { type: [String, Array], default: () => '' },
      panelClass: { type: [String, Array], default: () => '' },
      bttnAs: { type: [String, Object], default: () => 'button' },
      bttnText: { type: String, default: () => '' },
    ...transitionProps,
  })

  const bttnClasses = computed(() => classToArray(props.bttnClass))
  const panelClasses = computed(() => classToArray(props.panelClass))
</script>

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