<template>
<section>
    <div class="heading closable" v-if="closable" @click.stop="flag = !flag" :class="{ 'closed': !flag }">
        <h4 v-html="title" v-if="heading.toLowerCase() == 'h4' && title.length"></h4>
        <h5 v-html="title" v-if="heading.toLowerCase() == 'h5' && title.length"></h5>
        <h6 v-html="title" v-if="heading.toLowerCase() == 'h6' && title.length"></h6>
        <Icon :icon="['fabt', flag ? 'chevron-up' : 'chevron-down']" class="closeIcon"/>
        <div v-if="helpText" :class="`helpIcon tt-${tooltipDir} tt-large tt-info`" :aria-label="helpText"><Icon :icon="['fabt', 'circle-info']"/></div>
    </div>
    <div class="heading" v-else>
        <h4 v-html="title" v-if="heading.toLowerCase() == 'h4' && title.length"></h4>
        <h5 v-html="title" v-if="heading.toLowerCase() == 'h5' && title.length"></h5>
        <h6 v-html="title" v-if="heading.toLowerCase() == 'h6' && title.length"></h6>
        <div v-if="helpText" :class="`helpIcon tt-${tooltipDir} tt-large tt-info`" :aria-label="helpText"><Icon :icon="['fabt', 'circle-info']"/></div>
    </div>
    <transition name="commonfade" mode="in-out">
        <div class="section-body" v-show="flag">
            <slot></slot>
        </div>
    </transition>
</section>
</template>

<script>
import { FontAwesomeIcon as Icon } from '@fortawesome/vue-fontawesome'

export default {
	name: 'FormSection',
	props: {
		heading: {
			type: String,
			default: 'h5',
			validate: function (v) {
				return ['h4', 'h5', 'h6'].includes(v.toLowerCase())
			}
		},
		title: {
			type: String
		},
		closable: {
			type: Boolean,
			default: false
		},
		isOpen: {
			type: Boolean,
			default: true
		},
		helpText: {
			type: String,
			default: null
		},
		tooltipDir: {
			type: String,
			default: 'l',
			validate: function (v) {
				return ['tl', 'bl', 'l'].includes(v)
			}
		}
	},
	components: {
		Icon
	},
	data() {
		return {
			flag: this.isOpen
		}
	},
	watch: {
		flag(n, o) {
			this.$emit('toggle', n)
		}
	}
}
</script>
