<template>
        <ion-content class="loc-content">
            <span class="loc-close-btn" @click="closeIntroduction()">close</span>
            <ion-slides pager="true" class="loc-slides" ref="slides" v-on:ionSlideDidChange="slidesChanged($event)">

                <ion-slide class="loc-slide" v-for="(slide, idx) in slides" :key="idx">                   
                    <img :src="slide.upperImg" class="loc-top"/>			       
                    <div class="loc-mid">
                        {{slide.text}}                      
			        </div>
                    <img :src="slide.lowerImg" class="loc-bottom"/>			       
                </ion-slide>

                <ion-slide class="loc-slide">
                    <img :src="finalSlideTopPic" class="loc-top"/>			       
                    <div class="loc-mid">
                        You are all set! 🐱‍🏍  
			        </div> 		       
                    <ion-button @click="closeIntroduction()" class="exitButton">Ok, thanks!</ion-button>                    
                </ion-slide>

            </ion-slides>
            <div class="loc-arrow" v-if="arrowVisible" @click="nextSlide()">
                <ion-icon name="arrow-forward"></ion-icon>
            </div>
        </ion-content>
</template>

<script>

export default {
    props:{
        closeIntroduction:{
            type: Function,
            default: () => { return }
        },
        slides:{
            type: Array,
            default: () => { return ['UpperImg', 'Text', 'LowerImg']; }
        },
        finalSlideTopPic:{
            type: String,
            default: () => {return ''}
        }           
    },
    data(){
        return { 
            arrowVisible: true
        }
    },
    methods: {
        async slidesChanged(event) {
            const index = await this.$refs.slides.getActiveIndex();
            const length = await this.$refs.slides.length();
            this.arrowVisible = index !== length - 1;
        },
        nextSlide(){
            this.$refs.slides.slideNext();
        }
    }
}
</script>

<style scoped lang="css">

.loc-content{
    --background: #fff;
}
.loc-slide{
    height: 100vh;
    flex-direction: column;
    background: #fff;
}
.loc-slides{
    position: relative;
	z-index: 11;
	background-color: #fff;
	height: 100vh;
	--bullet-background: var(--actiways-primary-color);
    --bullet-background-active: var(--actiways-primary-color);
}
.loc-top{
    display: block;
    position: absolute;
    max-height: 75vh;
    max-width: 75vw;
    top: 20vh;
}

.loc-mid{
    display: block;
    position: absolute;
    width: 90%;
    color: var(--reco-light-font-color); 
    font-size: 24px;
    line-height: 1.5em;
}

.exitButton{
    display: block;
    position: absolute;
    z-index: 50;
    bottom: 20vh;
    --background: var(--actiways-primary-color);
    --background-active: var(--actiways-primary-color);
}

.loc-arrow{
    position: absolute;
    top: 90%;
    right: 10%;
    font-size: 2em;
    color: var(--actiways-primary-color);
    z-index: 500;
    animation-name: arrowMover;
    animation-iteration-count:infinite;
    animation-duration: 1s;
}

@keyframes arrowMover {
    from{
        right: 12%;
    }
    to {
        right: 17%;
    }
}

.loc-bottom{
    display: block;
    position: absolute;
    /* max-height: 35vh;
    max-width: 35vw; */
    bottom: 20vh;
    animation-name: fade-in;
    animation-duration: 1.5s;
}

@keyframes fade-in {
  from {
      opacity: 0;
      bottom: -20vh;}
  to {
      opacity: 1;
      bottom: 20vh;
      }
}
.loc-close-btn{
    position: fixed;
    top: 2vh;
    right: 4vw;
    z-index: 99;
    font-weight: 600;
    color: var(--actiways-primary-color);
}
</style>