<template>
    <div class="infinite-scroll-container">
        <div class="wrapper" :style="{ height: totalHeight + 'px' }">
            <!-- Render visible viewports -->
            <div
                v-for="viewport in visibleViewports"
                class="viewport"
                :style="{
                    top: viewport.offsetY + 'px',
                    height: viewport.height + 'px',
                }"
                :key="viewport.index"
            >
                <slot
                    name="viewport"
                    :viewport="viewport"
                    :index="viewport.index"
                    :content="viewport.content"
                    :isActive="viewport.index === currentViewportIndex"
                >
                    <!-- Default viewport content -->
                    <div class="default-viewport">
                        <h2>Viewport {{ viewport.index }}</h2>
                        <pre>{{
                            JSON.stringify(viewport.content, null, 2)
                        }}</pre>
                    </div>
                </slot>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useInfiniteScroll } from '@/composables/useInfiniteScroll'

const props = defineProps({
    /**
     * Function to generate content for each viewport
     * @param {number} index - Viewport index
     * @returns {Promise|Object} Content for the viewport
     */
    generateContent: {
        type: Function,
        required: true,
    },

    /**
     * Height of each viewport in pixels
     * If not provided, will use window height
     */
    viewportHeight: {
        type: Number,
        default: null,
    },

    /**
     * Number of viewports to keep loaded outside visible area
     */
    bufferSize: {
        type: Number,
        default: 1,
    },

    /**
     * Starting viewport index
     */
    initialIndex: {
        type: Number,
        default: 0,
    },
})

const emit = defineEmits(['viewport-change', 'content-loaded'])

const {
    currentViewportIndex,
    visibleViewports,
    totalHeight,
    scrollY,
    scrollToViewport,
    reset,
    retryViewport,
    hasError,
    errors,
    _state,
} = useInfiniteScroll({
    generateContent: async (index) => {
        const content = await props.generateContent(index)
        emit('content-loaded', { index, content })
        return content
    },
    viewportHeight: props.viewportHeight,
    bufferSize: props.bufferSize,
    initialIndex: props.initialIndex,
})

// Watch for viewport changes and emit event
import { watch } from 'vue'
watch(currentViewportIndex, (newIndex, oldIndex) => {
    emit('viewport-change', { newIndex, oldIndex })
})

// Expose methods to parent component
defineExpose({
    scrollToViewport,
    reset,
    retryViewport,
    currentViewportIndex,
    visibleViewports,
    totalHeight,
    scrollY,
    hasError,
    errors,
    // Debug access
    _state,
})
</script>

<style lang="scss" scoped>
.infinite-scroll-container {
    position: relative;
    width: 100%;

    .wrapper {
        position: relative;
        width: 100%;
        min-height: 100vh;
    }

    .viewport {
        box-sizing: border-box;
        position: absolute;
        width: 100%;
    }
}
</style>
