<template>
  <div
    class="ui-size-animation"
    :class="{ ready, show: max !== 0, [animationStyle]: animationStyle }"
    :style="origin && {'max-height': max + 'px'}"
    ref="contentRef">
    <slot />
  </div>  
</template>


<script setup>
import { changeWHFactory } from '../../utils'
import { defineExpose, ref, watchEffect, defineProps } from 'vue'

const props = defineProps({
  attr: {
    type: String,
    default: 'height'
  },
  animationStyle: {
    type: String,
    default: 'height'
  }
})

const [
  contentRef, 
  changeShow, 
  max,
  origin,
  show,
  ready,
  refer
] = changeWHFactory(false, props.attr)

const animation = ref(false)


watchEffect(() => {
  const dom = contentRef.value
  if (dom) {
    const startHandler = () => animation.value = true
    const endHandler = () => animation.value = false

    dom.addEventListener('transitionstart', startHandler)
    dom.addEventListener('transitionend', endHandler)
    return () => {
      dom.removeEventListener('transitionstart', startHandler)
      dom.removeEventListener('transitionend', endHandler)
    }
  }
})

defineExpose({
  changeShow: (setShow, ...args) => {
    if (show !== setShow) {
      animation.value = true
    }
    return changeShow(setShow, ...args)
  },
  show,
  animation,
  ready,
  refer
})
</script>
<script> export default { name: 'ui-size-animation' } </script>