<template>
    <mtc-swiper
        :slides-per-view="slidesPerView"
        :slides-per-group="slidesPerGroup"
        :space-between="spaceBetween"
        :navigation="navigation"
        :pagination="pagination"
        :loop="loop"
        :autoplay="autoplay"
        :breakpoints="breakpoints"
        :effect="effect"
        :fade-effect="fadeEffect"
        :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() {
            // Splide: perPage → Swiper: slidesPerView
            return this.parsedOptions.perPage || 1;
        },
        slidesPerGroup() {
            // Splide: perMove → Swiper: slidesPerGroup
            return this.parsedOptions.perMove || undefined;
        },
        spaceBetween() {
            // Splide: gap → Swiper: spaceBetween
            return this.parsedOptions.gap || 0;
        },
        navigation() {
            // Splide: arrows (boolean) → Swiper: navigation (boolean or object)
            return this.parsedOptions.arrows === true;
        },
        pagination() {
            if (this.parsedOptions.pagination === true) {
                return {clickable: true};
            }
            return this.parsedOptions.pagination || false;
        },
        loop() {
            // Splide: rewind or loop → Swiper: loop
            return this.parsedOptions.loop === true || this.parsedOptions.rewind === 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];
                    const breakpointConfig = {
                        slidesPerView: s.perPage || 1,
                        spaceBetween: s.gap || 0
                    };
                    // Add slidesPerGroup if perMove is specified
                    if (s.perMove !== undefined) {
                        breakpointConfig.slidesPerGroup = s.perMove;
                    }
                    // Swiper breakpoints don't properly support navigation as boolean
                    // So we simply don't include navigation in breakpoints
                    // The root-level navigation setting will handle it
                    swiperBreakpoints[breakpoint] = breakpointConfig;
                });
                return swiperBreakpoints;
            }
            return {};
        },
        effect() {
            return this.parsedOptions.fade ? 'fade' : undefined;
        },
        fadeEffect() {
            if (this.parsedOptions.fade) {
                return { crossFade: true };
            }
            return 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>