<template>
    <div
        id="slick-cards"
        class=" d-flex flex-wrap align-items-end justify-content-center "
    >
        <div ref="root" class="position-absolute gallery-wrap" :class="theme">
            <div ref="container" class="gallery-cards w-100 main-carousel">
                <slot></slot>
            </div>
        </div>
        <SliderControls
            :class="theme"
            :slides-to-show-scroll="slidesToShowScroll"
            :slides-number="slidesNumber"
            :slide-current-index="slideIndex"
            :infotext="infotext"
            @next="next"
            @prev="prev"
        ></SliderControls>
    </div>
</template>

<script>
import SliderControls from './SliderControls.vue'
import Flickity from 'flickity'
import FuggerButton from './FuggerButton.vue'

export default {
    name: 'SliderCards',
    components: {
        SliderControls,
        FuggerButton,
    },
    props: {
        theme: {
            type: String,
            default: 'desktop',
            validator: function(value) {
                // The value must match one of these strings
                return (
                    ['desktop', 'm07', 'm13', 'm14', 'm14-answer'].indexOf(
                        value,
                    ) !== -1
                )
            },
        },
        slidesNumber: {
            type: Number,
            default: 3,
        },
        infotext: {
            type: String,
            default: '',
        },
        value: {
            type: Number,
            default: 0,
        },
    },
    data() {
        return {
            slideIndex: 1,
            flkty: '',
            options: {
                wrapAround: false,
                cellAlign: 'center',
                prevNextButtons: false,
                pageDots: false,
                setGallerySize: false,
                adaptiveHeight: false,
                initialIndex: this.value,
                draggable: true,
                dragThreshold: 3,
                groupCells: this.slidesToShowScroll,
            },
        }
    },
    computed: {
        slidesToShowScroll() {
            if (this.theme === 'desktop') {
                return 5
            } else if (this.theme === 'm07') {
                return 3
            } else if (this.theme === 'm14') {
                return 2
            } else if (this.theme === 'm14-answer') {
                return 1
            }
            return 0
        },
    },
    watch: {
        slidesNumber() {
            if (this.flkty) {
                this.flkty.reloadCells()
            }
        },
        theme() {
            this.reInit()
            if (this.flkty) {
                this.flkty.reloadCells()
            }
        },
        value() {
            if (this.flkty) {
                this.flkty.select(this.value)
            }
        },
    },
    mounted() {
        this.options.groupCells = this.slidesToShowScroll
        this.initFlkty()
        this.slideIndex = this.value + 1
    },
    methods: {
        next() {
            // this.$refs.slick.next()
            this.flkty.next()
        },
        prev() {
            // this.$refs.slick.prev()
            this.flkty.previous()
        },
        initFlkty() {
            this.options.groupCells = this.slidesToShowScroll
            this.$nextTick(() => {
                this.flkty = new Flickity(this.$refs.container, this.options)
                this.flkty.on('change', this.onChange)
                this.flkty.on('ready', this.$emit('ready'))
            })
        },
        reInit() {
            this.options.groupCells = this.slidesToShowScroll
            this.$nextTick(() => {
                this.flkty.resize()
            })
        },
        onChange(index) {
            this.slideIndex = index + 1
        },
    },
}
</script>

<style lang="scss">
@import 'assets/scss/variables';
@import 'assets/scss/buttons';
@import 'assets/scss/global';

#slick-cards .gallery-wrap {
    overflow: hidden;
    &.desktop {
        height: calc(320vw * var(--pxToVw));
        top: calc(390vw * var(--pxToVw));
        left: calc(61vw * var(--pxToVw));
        width: calc(1620vw * var(--pxToVw));

        .slide {
            margin-right: calc(12vw * var(--pxToVw));
            margin-left: calc(12vw * var(--pxToVw));
        }
    }

    &.m07 {
        height: calc(211vw * var(--pxToVw));
        bottom: calc(342vw / 2 * var(--pxToVw));
        left: calc(47.5vw * var(--pxToVw));
        width: calc(721.5vw * var(--pxToVw));

        .slide {
            margin-right: calc(4vw * var(--pxToVw));
            margin-left: calc(4vw * var(--pxToVw));
        }
    }

    &.m14 {
        transition: height 0.3s ease-in-out;
        height: calc(var(--m14-card-height) * var(--pxToVw));
        top: unset;
        bottom: calc(282.5vw * var(--pxToVw));
        left: calc(88vw * var(--pxToVw));
        width: calc(902vw * var(--pxToVw));

        .slide {
            margin-right: calc(9.5vw * var(--pxToVw));
            margin-left: calc(9.5vw * var(--pxToVw));
        }
    }

    &.m14-answer {
        transition: height 0.3s ease-in-out;
        height: calc(var(--m14-answer-height) * var(--pxToVw));
        top: unset;
        width: calc(907vw * var(--pxToVw));
        bottom: calc(0vw * var(--pxToVw));

        .slide {
            height: 100%;
            margin-right: calc(2.5vw * var(--pxToVw));
            margin-left: calc(2.5vw * var(--pxToVw));
        }
    }
}
</style>
