<template>
	<li
		class="wcc-app-accordion-item"
		:data-wcc-toggle="`wcc-${Accordion.name}-accordion-${this.index}`"
	>
		<div class="wcc-app-accordion-trigger" @click="open">
			<!-- This slot will handle the title/header of the accordion and is the part you click on -->
			<slot name="accordion-trigger"></slot>
		</div>

		<transition name="wcc-app-accordion">
			<div class="wcc-app-accordion-content">
				<div class="wcc-app-accordion-content-inner">
					<slot name="accordion-content"></slot>
				</div>
			</div>
		</transition>
	</li>
</template>

<script>
export default {
	props: {
		visible: {
			type: Boolean,
			default: false,
		}
	},
	inject: ["Accordion", "watchAccordion"],
	data() {
		return {
			index: null,
		};
	},
	methods: {
		open() {
			this.watchAccordion(this.index);
			this.$root.$emit("AccordionOpened", this.Accordion);
		},
	},
	created() {
		this.index = this.Accordion.count++;
	},
	mounted() {
		if(this.visible ) this.watchAccordion(this.index) 
	},
};
</script>