<template>
	<transition
		enter-active-class="enter-active"
		leave-active-class="leave-active"
		@before-enter="beforeEnter"
		@enter="enter"
		@after-enter="afterEnter"
		@before-leave="beforeLeave"
		@leave="leave"
		@after-leave="afterLeave"
		>
		<slot />
	</transition>
</template>

<script>

export default {
	props : {
		scrollToOnOpen : Boolean,
		tag : { type: String, default: null }
	},
	methods: {
		beforeEnter(element) {
			requestAnimationFrame(() => {
				if (!element.style.height) {
					element.style.height = '0px';
				}
				element.style.display = null;
			});
		},
		enter(element) {
			requestAnimationFrame(() => {
				requestAnimationFrame(() => {
				element.style.height = `${element.scrollHeight}px`;
				});
			});
		},
		afterEnter(element) {
			element.style.height = null;
			if(this.scrollToOnOpen) {
				this.scrollTo(element)
			}
			this.$emit('opened',element)
		},
		beforeLeave(element) {
			requestAnimationFrame(() => {
				if (!element.style.height) {
					element.style.height = `${element.offsetHeight}px`;
				}
			});
		},
		leave(element) {
			requestAnimationFrame(() => {
				requestAnimationFrame(() => {
				element.style.height = '0px';
				});
			});
		},
		afterLeave(element) {
			element.style.height = null;
			this.$emit('closed',element)
		},
		scrollTo(element){
			element.scrollIntoView({ behavior: "smooth" })
		},
	},
};
</script>

<style lang="scss" scoped>
.enter-active,
.leave-active {
	overflow: hidden;
	transition: height 0.2s linear;
}
</style>