<script setup lang="ts">
import ui from "#adata-ui/components/elements/accordion/AAccordionGroup/ui.config";
import { twMerge } from 'tailwind-merge'

const props = defineProps<{
  transition?: {
    enterActiveClass?: string
    leaveActiveClass?: string
  }
}>()

const mergedUi = computed(() => ({
  transition: {
    enterActiveClass: twMerge(
      ui.transition.enterActiveClass,
      props.transition?.enterActiveClass
    ),
    leaveActiveClass: twMerge(
      ui.transition.leaveActiveClass,
      props.transition?.leaveActiveClass
    )
  }
}))

function onEnter(_el: Element, done: () => void) {
  const el = _el as HTMLElement
  el.style.height = '0'
  el.offsetHeight // Trigger a reflow, flushing the CSS changes
  el.style.height = el.scrollHeight + 'px'

  el.addEventListener('transitionend', done, {once: true})
}

function onBeforeLeave(_el: Element) {
  const el = _el as HTMLElement
  el.style.height = el.scrollHeight + 'px'
  el.offsetHeight // Trigger a reflow, flushing the CSS changes
}

function onAfterEnter(_el: Element) {
  const el = _el as HTMLElement
  el.style.height = 'auto'
}

function onLeave(_el: Element, done: () => void) {
  const el = _el as HTMLElement
  el.style.height = '0'

  el.addEventListener('transitionend', done, {once: true})
}
</script>

<template>
  <Transition
    v-bind="mergedUi.transition"
    @enter="onEnter"
    @after-enter="onAfterEnter"
    @before-leave="onBeforeLeave"
    @leave="onLeave"
  >
    <slot/>
  </Transition>
</template>

<style scoped>

</style>
