<template>
    <div>
        <div id="carousel-frame-wrap">
            <carousel-3d
                ref="carousel"
                class="carousel py-4"
                :perspective="0"
                :start-index="0"
                :space="630"
                :inverse-scaling="0"
                :border="0"
                :clickable="true"
                :loop="true"
                :disable3d="false"
                :controls-visible="false"
                :on-main-slide-click="onSelect"
                @after-slide-change="afterSlideChange"
            >
                <template v-if="content">
                    <slide
                        v-for="(slide, index) in content"
                        :key="'slide-3d-' + index"
                        :index="index"
                    >
                        <img
                            v-if="slide && slide.content.backgroundImage.global"
                            :src="
                                getAssetPath(
                                    slide.content.backgroundImage.global
                                        .imageAsset,
                                )
                            "
                        />
                        <!--                        {{ slide }}-->
                        <div class="slide-btn">
                            <div class="slide-btn-inner">
                                <div>
                                    <h5 class="m-0">
                                        {{ index + 16 }}.
                                        {{
                                            getInterfaceText(
                                                'century_slider_century',
                                            )
                                        }}
                                    </h5>
                                    <h3 class="m-0">
                                        {{
                                            getLanguage(
                                                slide.children[0].content
                                                    .headline,
                                            )
                                        }}
                                    </h3>
                                </div>
                                <div
                                    class="slide-btn-circle bg-white rounded-circle"
                                >
                                    <fugger-icons name="card-next-icon" />
                                </div>
                            </div>
                        </div>
                    </slide>
                </template>
            </carousel-3d>
        </div>
        <SliderControls
            class="m13"
            :slide-current-index="currentIndex"
            :slides-number="content.length"
            :slides-to-scroll="1"
            :slides-to-show="1"
            loop
            @next="next()"
            @prev="prev()"
        ></SliderControls>
    </div>
</template>

<script>
import { Carousel3d, Slide } from 'vue-carousel-3d'
import SliderControls from './SliderControls.vue'
import FuggerButton from './FuggerButton.vue'
import { eventbus } from './index'
import FuggerIcons from './FuggerIcons'

export default {
    name: 'FuggerCarousel3d',
    components: {
        FuggerIcons,
        Carousel3d,
        Slide,
        SliderControls,
        FuggerButton,
    },
    props: {
        content: {
            type: Array,
            default: null,
        },
    },
    data() {
        return {
            currentIndex: 1,
        }
    },
    methods: {
        onSelect() {
            this.$emit('select', this.$refs.carousel.currentIndex)
            eventbus.$emit(
                'selectedCarouselItem',
                this.$refs.carousel.currentIndex,
            )
        },
        afterSlideChange(index) {
            console.log(index)
            this.currentIndex = index + 1
        },
        next() {
            console.log(this.$refs.carousel)
            this.$refs.carousel.goNext()
            this.currentIndex = this.$refs.carousel.currentIndex + 1
        },
        prev() {
            this.$refs.carousel.goPrev()
            this.currentIndex = this.$refs.carousel.currentIndex + 1
        },
    },
}
</script>
<style lang="scss">
#carousel-frame-wrap {
    width: 100vw;
    height: calc(1250vw * var(--pxToVw));
    top: calc(380vw * var(--pxToVw));
    position: absolute;

    .carousel {
        height: 100% !important;

        .carousel-3d-slider {
            height: 100% !important;
            width: calc(820vw * var(--pxToVw)) !important;

            .carousel-3d-slide {
                height: 100% !important;
                width: 100% !important;
                box-shadow: 0 0 calc(18vw * var(--pxToVw))
                    calc(8vw * var(--pxToVw)) rgba(0, 0, 0, 0.2);

                &:not(.current) {
                    opacity: 0.5 !important;
                }

                img {
                    height: 100%;
                    object-fit: cover;
                }

                .slide-btn {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;

                    .slide-btn-inner {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        background-color: var(--primary);
                        color: white;
                        margin: calc(50vw * var(--pxToVw));
                        padding: calc(25vw * var(--pxToVw))
                            calc(40vw * var(--pxToVw));

                        .slide-btn-circle {
                            width: calc(80vw * var(--pxToVw));
                            height: calc(80vw * var(--pxToVw));

                            span {
                                height: inherit;
                                width: inherit;

                                svg {
                                    height: inherit;
                                    width: inherit;
                                    fill: var(--primary);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
