<template>
    <div
        id="image-slider"
        class="image-slider-wrap"
        :class="{ framed: framed }"
    >
        <div v-if="framed" class="overlay"></div>
        <div class="row no-gutters h-100">
            <div class="infobox col-4 h-100">
                <div class="infobox-inner">
                    <slot></slot>
                </div>
            </div>
            <div
                class="image-slider col-8 h-100"
                :class="{ background: framed }"
            >
                <vue-agile
                    v-if="slides.length > 1"
                    ref="main"
                    class="gallery"
                    :options="optionsMain"
                    @before-change="showCurrentSlide($event)"
                    @after-change="showNextSlide($event)"
                >
                    <div
                        v-for="(slide, index) in slides"
                        :key="'slide-' + index"
                        :class="`slide--${index}`"
                    >
                        <div class="image-container">
                            <template v-if="slide.templateId === 6">
                                <img
                                    v-if="slide.content.image.global"
                                    class="slide-image"
                                    :class="
                                        framed ? 'slide-framed' : 'slide-normal'
                                    "
                                    :src="
                                        getAssetPath(
                                            slide.content.image.global
                                                .imageAsset,
                                        )
                                    "
                                />
                                <div class="slide-image-description">
                                    <p class="text-left">
                                        {{ getLanguage(slide.content.caption) }}
                                    </p>
                                </div>
                            </template>
                            <template v-if="slide.templateId === 4">
                                <img
                                    v-if="slide.content.video"
                                    class="slide-image"
                                    :class="
                                        framed ? 'slide-framed' : 'slide-normal'
                                    "
                                    :src="
                                        getAssetPath(
                                            slide.content.video.global
                                                .posterAsset,
                                        )
                                    "
                                    @click.prevent="
                                        $event('startVideo', slide.id)
                                    "
                                />
                            </template>
                        </div>
                    </div>
                </vue-agile>
                <div v-else class="gallery slide">
                    <div v-if="slides[0]" class="image-container">
                        <img
                            v-if="slides[0].content.image.global"
                            class="slide-image mb-3"
                            :class="framed ? 'slide-framed' : 'slide-normal'"
                            :src="
                                getAssetPath(
                                    slides[0].content.image.global.imageAsset,
                                )
                            "
                        />
                        <div class="slide-image-description">
                            <p class="text-left">
                                {{ getLanguage(slides[0].content.caption) }}
                            </p>
                        </div>
                    </div>
                </div>
                <template v-if="slides.length > 1">
                    <div
                        class="nav-button prev d-flex justify-content-center align-items-center square-btn-drop-shadow"
                        @click="$refs.main.goToPrev()"
                    >
                        <fugger-icons
                            primary
                            name="arrow-prev-icon"
                        ></fugger-icons>
                    </div>
                    <div
                        class="nav-button next d-flex justify-content-center align-items-center square-btn-drop-shadow"
                        @click="$refs.main.goToNext()"
                    >
                        <fugger-icons
                            primary
                            name="arrow-next-icon"
                        ></fugger-icons>
                    </div>
                </template>
                <vue-agile
                    v-if="slides.length > 1 && $refs.main"
                    class="gallery-thumbnail"
                    :options="optionsThumbnails"
                    :as-nav-for="[$refs.main]"
                >
                    <div
                        v-for="(slide, index) in slides"
                        :key="'thumbnail-' + index"
                        class="image-container"
                        :class="
                            index === $refs.main.getCurrentSlide()
                                ? 'active'
                                : ''
                        "
                        @click="$refs.main.goTo(index)"
                    >
                        <div
                            v-if="index === $refs.main.getCurrentSlide()"
                            class="active-image"
                        />
                        <template v-if="slide.templateId === 6">
                            <img
                                v-if="slide.content.image.global"
                                :src="
                                    getAssetPath(
                                        slide.content.image.global.imageAsset,
                                        '640',
                                    )
                                "
                            />
                        </template>
                        <template v-if="slide.templateId === 4">
                            <img
                                v-if="slide.content.video"
                                :src="
                                    getAssetPath(
                                        slide.content.video.global.posterAsset,
                                        '640',
                                    )
                                "
                            />
                        </template>
                    </div>
                </vue-agile>
            </div>
        </div>
        <div class="close-btn-wrap">
            <fugger-button
                iconname="back-icon"
                iconpos="left"
                theme="dark"
                type="menulink-btn"
                callback="closeImageSlider"
            >
                {{ getInterfaceText('button_back') }}
            </fugger-button>
        </div>
    </div>
</template>

<script>
import { VueAgile } from 'vue-agile'
import FuggerButton from './FuggerButton'
import FuggerIcons from './FuggerIcons'

export default {
    name: 'SliderImage',
    components: {
        FuggerIcons,
        VueAgile,
        FuggerButton,
    },
    props: {
        framed: {
            type: Boolean,
            default: false,
        },
        slides: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            currentSlide: 1,
            optionsMain: {
                dots: false,
                fade: true,
                navButtons: false,
            },

            optionsThumbnails: {
                slidesToShow: this.slides.length,
                slidesToScroll: 0,
                dots: false,
                navButtons: false,
                infinite: false,
            },
        }
    },
    computed: {},
    methods: {
        showCurrentSlide(event) {
            this.currentSlide = event.currentSlide
        },
        showNextSlide(event) {
            // console.log(event)
            this.nextSlide = event.currentSlide
        },
    },
}
</script>
<style lang="scss" scoped>
@import 'assets/scss/variables';
@import 'assets/scss/buttons';
@import 'assets/scss/global';

#image-slider {
    &.image-slider-wrap {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
    }

    &.framed {
        padding: calc(180vw * var(--pxToVw));
    }

    .overlay {
        position: absolute;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vw;
        z-index: 1;
        background: #000000;
        opacity: 0.5;
    }

    .background {
        background: var(--app-background-color);
    }

    .row * {
        z-index: 2;
    }

    .infobox {
        display: inline-block;
        text-align: left;
        background-color: white;
        box-shadow: calc(0vw * var(--pxToVw)) calc(4vw * var(--pxToVw))
            calc(4vw * var(--pxToVw)) rgba(0, 0, 0, 0.25);
        padding: calc(113vw * var(--pxToVw)) calc(40vw * var(--pxToVw))
            calc(150vw * var(--pxToVw));
        z-index: 3;

        .infobox-inner {
            overflow: hidden auto;
            height: 100%;
            padding-right: calc(20vw * var(--pxToVw));
            padding-bottom: calc(50vw * var(--pxToVw));
        }
    }

    .nav-button {
        width: calc(80vw * var(--pxToVw));
        height: calc(80vw * var(--pxToVw));
        position: absolute;
        top: 45%;
        background: white;
        fill: var(--primary);
        &.prev {
            left: 0;
        }

        &.next {
            right: 0;
        }

        span {
            width: 100%;
            height: 100%;
        }
    }

    .gallery {
        max-width: 80%;
        margin: 0 auto;
        padding-top: calc(113vw * var(--pxToVw));

        .slide-normal {
            height: calc(658vw * var(--pxToVw));
            max-width: 100%;
        }
        .slide-framed {
            height: calc(600vw * var(--pxToVw));
            max-width: 100%;
        }

        .slide-image-description {
            position: relative;
            height: calc(50vw * var(--pxToVw));
        }

        .image-container {
            margin: auto;
            max-width: 100%;
            width: fit-content;
            img {
                object-fit: contain;
            }
        }
    }

    .gallery-thumbnail {
        position: absolute;
        bottom: calc(63vw * var(--pxToVw));
        left: calc(90vw * var(--pxToVw));

        .image-container {
            margin-right: calc(10vw * var(--pxToVw));
            height: calc(80vw * var(--pxToVw));
            width: calc(120vw * var(--pxToVw));
            position: relative;
            box-shadow: calc(0vw * var(--pxToVw)) calc(-2vw * var(--pxToVw))
                calc(8vw * var(--pxToVw)) rgba(0, 0, 0, 0.5);
            .active-image {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                background: var(--primary);
                opacity: 0.8;
            }

            img {
                height: 100%;
                width: 100%;
                object-fit: cover;
            }
        }
    }
    .close-btn-wrap {
        position: absolute;
        width: calc(253vw * var(--pxToVw));
        left: 0;
        z-index: 100;
        bottom: calc(62vw * var(--pxToVw));
    }
}
</style>
