<template>
    <mtc-swiper
        :slides-per-view="slidesPerView"
        :space-between="spaceBetween"
        :navigation="navigation"
        :pagination="pagination"
        :loop="loop"
        :autoplay="autoplay"
        :breakpoints="breakpoints"
        :effect="effect"
        :speed="speed"
        :thumbs="thumbsConfig"
        @swiper="emitSwiper"
    >
        <slot></slot>
    </mtc-swiper>
</template>

<script>
export default {
    name: 'MtcSliderWrapper',
    props: {
        options: {
            type: [Object, String],
            default: () => ({})
        },
        thumbsSwiper: {
            type: Object,
            default: null
        }
    },
    computed: {
        parsedOptions() {
            if (typeof this.options === 'string') {
                try {
                    return JSON.parse(this.options);
                } catch (e) {
                    console.error('Failed to parse slider options:', e);
                    return {};
                }
            }
            return this.options;
        },
        slidesPerView() {
            return this.parsedOptions.perPage || 1;
        },
        spaceBetween() {
            return this.parsedOptions.gap || 0;
        },
        navigation() {
            return this.parsedOptions.arrows !== false;
        },
        pagination() {
            if (this.parsedOptions.pagination === true) {
                return {clickable: true};
            }
            return this.parsedOptions.pagination || false;
        },
        loop() {
            // Only enable loop when explicitly set to true; ignore Splide's rewind semantics
            return this.parsedOptions.loop === true;
        },
        autoplay() {
            if (this.parsedOptions.autoplay) {
                return {
                    delay: this.parsedOptions.autoplaySpeed || 5000,
                    disableOnInteraction: false
                };
            }
            return false;
        },
        breakpoints() {
            if (this.parsedOptions.breakpoints) {
                const swiperBreakpoints = {};
                Object.keys(this.parsedOptions.breakpoints).forEach(breakpoint => {
                    const s = this.parsedOptions.breakpoints[breakpoint];
                    swiperBreakpoints[breakpoint] = {
                        slidesPerView: s.perPage || 1,
                        spaceBetween: s.gap || 0,
                        navigation: s.arrows !== false
                    };
                });
                return swiperBreakpoints;
            }
            return {};
        },
        effect() {
            return this.parsedOptions.fade ? 'fade' : undefined;
        },
        speed() {
            return this.parsedOptions.speed || 300;
        },
        thumbsConfig() {
            if (this.thumbsSwiper) {
                return {swiper: this.thumbsSwiper};
            }
            return undefined;
        }
    },
    methods: {
        emitSwiper(swiper) {
            this.$emit('swiper', swiper);
        }
    }
};
</script>