<template>
    <div v-if="video || screenshots">
        <el-carousel :height="height"
            :initial-index="initial_index"
            :trigger="trigger" :autoplay="autoplay"
            :indicator-position="indicator_position"
            :type="type" :loop="loop" :direction="direction"
            :interval="interval" :arrow="arrow">

            <el-carousel-item v-if="video">
                <iframe class="carousel-frame w-100" height="365px"
                :src="'https://www.youtube-nocookie.com/embed/' + video"
                frameborder="0"
                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                <div class="carousel-description py-2">
                    {{ name }}
                </div>
            </el-carousel-item>

            <el-carousel-item v-for="(screenshot, index) in screenshots" :key="index">
                <img @click="openGallery(index)" class="d-block w-100 carousel-frame" height="365px" :src="screenshot.path_string" :alt="screenshot.alt_attribute">
                <div class="carousel-description py-2" v-if="screenshot.description">
                    {{ screenshot.description }}
                </div>
                <div class="carousel-description py-2" v-else>
                    {{ name }}
                </div>
            </el-carousel-item>
        </el-carousel>

      <LightBox
        v-if="media.length"
        ref="lightbox"
        :media="media"
        :show-caption="true"
        :show-light-box="false"
      />
    </div>
</template>

<script>
import Vue from 'vue';
import {Image, Carousel, CarouselItem} from 'element-ui';

import LightBox from 'vue-image-lightbox';
import 'vue-image-lightbox/dist/vue-image-lightbox.min.css';
import VueLazyLoad from 'vue-lazyload';

Vue.use(VueLazyLoad);

export default {
    name: "akaunting-carousel",

    components: {
        [Image.name]: Image,
        [Carousel.name]: Carousel,
        [CarouselItem.name]: CarouselItem,
        LightBox
    },

    props: {
        name: {
            type: String,
            default: null,
            description: "App Name"
        },
        video: {
            type: String,
            default: null,
            description: "App Video"
        },
        screenshots: {
            type: Array,
            default: false,
            description: "App Screenshots"
        },
        height: {
            type: String,
            default: null,
            description: "height of the carousel"
        },
        initial_index: {
            type: Number,
            default: 0,
            description: "index of the initially active slide (starting from 0)"
        },
        trigger: {
            type: String,
            default: 'hover',
            description: "how indicators are triggered (hover/click)"
        },
        autoplay: {
            type: Boolean,
            default: false,
            description: "whether automatically loop the slides"
        },
        interval: {
            type: Number,
            default: 3000,
            description: "interval of the auto loop, in milliseconds"
        },
        indicator_position: {
            type: String,
            default: 'none',
            description: "position of the indicators (outside/none)"
        },
        arrow: {
            type: String,
            default: 'hover',
            description: "when arrows are shown (always/hover/never)"
        },
        type: {
            type: String,
            default: '',
            description: "type of the Carousel (card)"
        },
        loop: {
            type: Boolean,
            default: true,
            description: "display the items in loop"
        },
        direction: {
            type: String,
            default: 'horizontal',
            description: "display direction (horizontal/vertical)"
        }
    },

    mounted() {
        let media = [];

        if (this.screenshots.length) {
            let name = this.name;

            this.screenshots.forEach(function(screenshot) {
                media.push({ // For image
                    thumb: screenshot.path_string,
                    src: screenshot.path_string,
                    caption: (screenshot.description.length) ? screenshot.description : name,
                });
            });
        }

        this.media = media;
    },

    data: function () {
        return {
            media: [],
        }
    },

    methods: {
        openGallery(index) {
            this.$refs.lightbox.showImage(index)
        }
    }
}
</script>