<template>
    <div class="tabWrapper" :id="id">
        <div v-if="type == 'vertical'" :class="align">
            <div class="cells left" v-if="align == 'left'" :style="'width: ' + tabwidth" ref="tablets">
                <ul :class="ulClass" slot="tabList">
                    <li :id="'li' + l.id" v-for="(l, idx) in tabList" @click="showTab(l.id)" :class="tabClass(l.id)" :key="idx">{{l.title}}</li>
                </ul>
            </div>
            <div class="cells center">
                <slot></slot>
            </div>
            <div class="cells right" v-if="align == 'right'" :style="'width: ' + tabwidth" ref="tablets">
                <ul :class="ulClass" slot="tabList">
                    <li :id="'li' + l.id" v-for="(l, idx) in tabList" @click="showTab(l.id)" :class="tabClass(l.id)" :key="idx">{{l.title}}</li>
                </ul>
            </div>
        </div>
        <div v-else>
            <ul :class="ulClass" slot="tabList">
                <li :id="'li' + l.id" v-for="(l, idx) in tabList" @click="showTab(l.id)" :class="tabClass(l.id)" :key="idx">{{l.title}}</li>
            </ul>
            <slot></slot>
        </div>
    </div>
</template>

<script>
import { find, isEmpty, defer, map } from 'lodash'
/**
* Parent component wrapper to generate tab layout
* Children - TabPane
*/
export default {
	name: 'Tabs',
	props: {
		/**
		* Type of display <i>inline, dialog, vertical</i>
		*/
		type: {
			type: String,
			default: 'inline'
		},
		/**
		* Tab alignment <i>left, center, right</i>
		*/
		align: {
			type: String,
			default: 'left'
		},
		/**
		* Unique identifier
		*/
		id: {
			type: String,
			required: true
		},
		/**
		* Identifier of child that needs to be preselected
		*/
		preselect: {
			type: String,
			default: ''
		},
		/**
		* Width of tabs when vertical mode is chosen
		*/
		tabwidth: {
			type: String,
			default: '80px'
		},
		/**
		* List of child tab pane ids that needs to be disabled
		*/
		disabled: {
			type: Array,
			default: function () {
				return []
			}
		}
	},
	data() {
		return {
			tabList: [],
			selectedTab: '',
			tabsHeight: 'auto'
		}
	},
	computed: {
		ulClass() {
			if (this.type === 'dialog') {
				return 'diatabs ' + this.align
			} else if (this.type === 'vertical') {
				return 'verttabs ' + this.align
			} else {
				return 'normtabs ' + this.align
			}
		}
	},
	methods: {
		checkTabsHeight() {
			defer(() => {
				if (this.type === 'vertical') {
					this.tabsHeight = this.$refs.tablets ? this.$refs.tablets.clientHeight + 20 : 'auto'
				}
			})
		},
		tabClass(id) {
			let cls = []
			for (let i = 0; i < this.tabList.length; i++) {
				if (this.tabList[i].id == id) {
					if (this.tabList[i].active) {
						cls.push('active')
					}
					if (this.tabList[i].disabled) {
						cls.push('disabled')
					}
				}
			}
			return cls.join(' ')
		},
		showTab(e) {
			let tab = find(this.tabList, { id: e })
			if (tab && !tab.disabled) {
				this.selectedTab = e
				this.tabList.forEach((t) => {
					if (t.id == e) {
						t.active = true
					} else {
						t.active = false
					}
				})
				this.$emit('tabselect', { id: this.id, tab: e })
			}
		},
		initTab(t) {
			this.tabList = []
			t.forEach((l) => {
				this.tabList.push({ id: l.id, title: l.title, active: false, disabled: this.disabled.includes(l.id) })
			})
			let tabNames = map(this.tabList, 'id')
			if (!isEmpty(this.selectedTab) && tabNames.includes(this.selectedTab)) {
				this.showTab(this.selectedTab)
			} else if (this.preselect.length > 0) {
				this.showTab(this.preselect)
			} else {
				this.showTab(this.tabList[0].id)
			}
			this.checkTabsHeight()
		}
	},
	mounted() {
		this.initTab(this.$children)
		this.$on('titleChanged', (id, name) => {
			for (let i = 0; i < this.tabList.length; i++) {
				if (this.tabList[i].id === id) {
					this.tabList[i].title = name
					break
				}
			}
		})
		this.$on('tabMod', (id) => {
			defer(() => {
				this.initTab(this.$children)
			})
		})
		this.$events.on(`tab|${this.id}`, (v) => {
			if (v.task.toLowerCase() == 'show') {
				this.showTab(v.val)
			}
		})
	},
	beforeDestroy() {
		this.$events.off(`tab|${this.id}`)
	},
	watch: {
		preselect(n, o) {
			this.selectedTab = n
			this.initTab(this.$children)
		},
		disabled(n, o) {
			this.initTab(this.$children)
		}
	}
}
</script>
