<template>
    <div class="drawerWrap">
        <div ref="sideNav" :class="navClass">
            <h4 class="title" v-show="showContent">{{title}}</h4>
            <Icon :icon="['fabt', 'times']" ref="closeIcon" class="closeIcon" @click.stop="closeMenu" v-show="crossIcon"/>
            <div class="bm-item-list" v-show="showContent">
                <slot></slot>
            </div>
        </div>
        <div ref="bmBurgerButton" :class="burgerClass">
            <Icon :icon="['fabt', 'bars']" class="burger-icon" @click.stop="openMenu" v-show="burgerIcon"/>
        </div>
    </div>
</template>

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

export default {
	name: 'DrawerBase',
	data() {
		return {
			isSideBarOpen: false,
			showContent: false
		}
	},
	props: {
		title: {
			type: String,
			default: 'Main Menu'
		},
		isOpen: {
			type: Boolean,
			required: false
		},
		right: {
			type: Boolean,
			required: false
		},
		width: {
			type: String,
			default: '300'
		},
		disableEsc: {
			type: Boolean,
			required: false
		},
		onStateChange: {
			type: Function,
			required: false
		},
		burgerIcon: {
			type: Boolean,
			default: true
		},
		crossIcon: {
			type: Boolean,
			default: true
		},
		disableOutsideClick: {
			type: Boolean,
			default: false
		},
		theme: {
			type: String,
			default: 'bt',
			validator: function (val) {
				return ['bt', 'dark', 'light'].indexOf(val) !== -1
			}
		},
		background: {
			type: String
		}
	},
	components: {
		Icon
	},
	computed: {
		navClass() {
			let cl = ['bm-drawer']
			cl.push(this.theme)
			cl.push(this.right ? 'right' : 'left')
			return cl.join(' ')
		},
		burgerClass() {
			let cl = ['bm-burger-button']
			cl.push(this.theme)
			cl.push(this.right ? 'right' : 'left')
			return cl.join(' ')
		}
	},
	methods: {
		openMenu() {
			this.$emit('openMenu')
			this.isSideBarOpen = true
			if (!isEmpty(this.background)) {
				this.$refs.sideNav.style.backgroundColor = this.background
			}
			if (this.right) {
				this.$refs.sideNav.style.left = 'auto'
				this.$refs.sideNav.style.right = '0px'
			}
			this.$nextTick(function () {
				this.$refs.sideNav.style.width = this.width ? this.width + 'px' : '300px'
			})
			setTimeout(() => {
				this.showContent = true
			}, 100)
		},
		closeMenu() {
			this.$emit('closeMenu')
			setTimeout(() => {
				this.showContent = false
			}, 150)
			this.isSideBarOpen = false
			document.body.className = document.body.className.replace('bm-overlay', '')
			this.$refs.sideNav.style.width = '0px'
		},
		closeMenuOnEsc(e) {
			e = e || window.event
			if (e.key === 'Escape' || e.keyCode === 27) {
				this.closeMenu()
			}
		},
		documentClick(e) {
			let element = this.$refs.bmBurgerButton
			let target = null
			if (e && e.target) {
				target = e.target
			}
			if (element && element !== target && !element.contains(target) && e.target.className !== 'bm-drawer' && this.isSideBarOpen && !this.disableOutsideClick) {
				this.closeMenu()
			}
		}
	},
	mounted() {
		if (!this.disableEsc) {
			document.addEventListener('keyup', this.closeMenuOnEsc)
		}
		if (this.right) {
			this.$refs.bmBurgerButton.removeAttribute('style')
			this.$refs.sideNav.style.right = 'auto'
		}
		this.$events.on('openDrawer', this.openMenu)
		this.$events.on('closeDrawer', this.closeMenu)
		document.addEventListener('click', this.documentClick)
		if (this.isOpen) {
			this.openMenu()
		}
	},
	beforeDestroy() {
		this.$events.off('openDrawer')
		this.$events.off('closeDrawer')
		document.removeEventListener('keyup', this.closeMenuOnEsc)
		document.removeEventListener('click', this.documentClick)
	}
}
</script>
