<template>
<div class="carousel" :id="id">
    <div class="track" ref="track">
        <slot></slot>
    </div>
    <div class="navig" v-show="showNavig">
        <button class="prev" @click="showPrevious" v-show="arrows" :disabled="!showLeftArrow"><Icon :icon="['fabt', 'chevron-left']"/></button>
        <ul class="dots" v-for="(i, index) in total" :key="index">
            <li :class="current == index ? 'dot active' : 'dot'"><button @click="current = index"/></li>
        </ul>
        <button class="next" @click="showNext" v-show="arrows" :disabled="!showRightArrow"><Icon :icon="['fabt', 'chevron-right']"/></button>
    </div>
</div>
</template>

<script>
import { FontAwesomeIcon as Icon } from '@fortawesome/vue-fontawesome'
export default {
	name: 'Carousel',
	components: {
		Icon
	},
	props: {
        /**
        * Unique identifier
        */
		id: {
			type: String,
			default: 'carousel'
		},
        /**
        * Start from a specific slide on load
        */
		preset: {
			type: Number,
			default: 0
		},
        /**
        * Scroll slides indefinitely
        */
		infinite: {
			type: Boolean,
			default: false
		},
        /**
        * Automatically scroll the slides
        */
		autoplay: {
			type: Boolean,
			default: false
		},
        /**
        * Wait time during autoscroll
        */
		interval: {
			default: 5000
		},
        /**
        * Show arrows
        */
		arrows: {
			type: Boolean,
			default: true
		},
        /**
        * Pauses on hover on the slide during autoplay mode
        */
		pauseonhover: {
			type: Boolean,
			default: true
		},
        /**
        * Type of animation for carousel [fade, fadeDown, slideRight, slideLeft]
        */
		animation: {
			type: String,
			default: 'fade',
			validator: value => {
				let list = ['fade', 'fadeDown', 'slideRight', 'slideLeft']
				return list.includes(value)
			}
		}
	},
	data() {
		return {
			slideList: [],
			selected: '',
			current: 0,
			total: 0,
			timeout: null,
			infLocal: this.infinite
		}
	},
	computed: {
		showLeftArrow() {
			return !(!this.autoplay && !this.infLocal) || this.current > 0
		},
		showRightArrow() {
			return !(!this.autoplay && !this.infLocal) || this.current < this.total - 1
		},
		showNavig() {
			return this.total > 1
		}
	},
	methods: {
		showPrevious() {
			if (this.infLocal) {
				(this.current === 0) ? this.current = (this.total - 1) : this.current -= 1
			} else {
				this.current -= 1
			}
		},
		showNext() {
			if (this.infLocal) {
				(this.current === (this.total - 1)) ? this.current = 0 : this.current += 1
			} else {
				this.current += 1
			}
		},
		startAutoPlay() {
			// If autoplay
			if (this.autoplay) {
				this.infLocal = true
				this.timeout = setInterval(() => {
					this.showNext()
				}, Number(this.interval))
			}
		},
		stopAutoPlay() {
			if (this.timeout) {
				clearInterval(this.timeout)
			}
		},
		attachEvents() {
			if (this.autoplay && this.pauseonhover) {
				this.$refs.track.addEventListener('mouseover', this.stopAutoPlay)
				this.$refs.track.addEventListener('mouseout', this.startAutoPlay)
			}
			window.addEventListener('keyup', this.listenKeys, false)
		},
		removeEvents() {
			if (this.autoplay && this.pauseonhover) {
				this.$refs.track.removeEventListener('mouseover', this.stopAutoPlay)
				this.$refs.track.removeEventListener('mouseout', this.startAutoPlay)
			}
			window.removeEventListener('keyup', this.listenKeys, false)
		},
		listenKeys(e) {
			if (e.keyCode === 39) {
				this.showNext()
			} else if (e.keyCode === 37) {
				this.showPrevious()
			}
		}
	},
	mounted() {
		this.slideList = []
		for (let i in this.$children) {
			if (i < this.$children.length) {
				this.slideList.push(this.$children[i].id)
			}
		}
		this.total = this.$children.length
		this.current = this.preset || 0
		this.selected = this.slideList[this.current]
		this.startAutoPlay()
		this.attachEvents()
	},
	beforeDestroy() {
		this.stopAutoPlay()
		this.removeEvents()
	},
	watch: {
		current(n, o) {
			this.selected = this.slideList[n]
		}
	}
}
</script>
