<template>
    <div class="mosaic-scroll">
        <infinite-scroll-container
            :bufferSize="2"
            :initialIndex="0"
            :generateContent="generateMosaicContent"
        >
            <template #viewport="{ viewport, content, isActive }">
                <mosaic-viewport
                    :viewport="viewport"
                    :index="viewport.index"
                    :content="content"
                    :isActive="isActive"
                />
            </template>
        </infinite-scroll-container>
    </div>
</template>

<script setup>
import _shuffle from 'lodash/shuffle'
import { useMosaicLayout } from '@/composables/useMosaicLayout'

const props = defineProps({
    items: Array,
})

// Initialize mosaic layout generator
const { generateLayout, populateCells } = useMosaicLayout()

// const generateGifContent = (cell) => {
//     return {
//         id: `gif-${cell.id}`,
//         width: Math.floor(cell.width),
//         height: Math.floor(cell.height),
//         note: _shuffle(
//             'curabitur euismod ultrices porttitor. Vivamus magna sapien, pretium at ullamcorper semper, sollicitudin et magna curabitur eget dolor a neque facilisis semper pellentesque euismod luctus urna, non aliquam justo aliquet id vestibulum quis lobortis diam nulla facilisi phasellus et rutrum lectus vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent mattis felis condimentum, gravida lacus id, pretium neque. Donec cursus augue a dui placerat porttitor.Vestibulum rhoncus lectus nisl, nec gravida ex sollicitudin vel etiam dictum ac lacus ac elementum donec turpis eros, aliquam in nibh a, posuere tristique neque. Nunc cursus molestie consectetur.Integer placerat lorem eu nunc semper porta.'.split(
//                 ' ',
//             ),
//         ).join(' '),
//     }
// }
const generateCellContent = () => {
    const itemIndex = Math.floor(Math.random() * props.items.length)
    return props.items[itemIndex]
}

// Generate mosaic content for each viewport
const generateMosaicContent = async (index) => {
    // Calculate target number of cells based on viewport size and index
    const baseCellCount = 6
    const variance = Math.abs(index % 2) * 2
    const targetCells = baseCellCount + variance

    const layoutOptions = {
        minCellWidth: 200,
        minCellHeight: 200,
        targetCells: targetCells,
    }

    // Generate the space-filling layout
    const cells = generateLayout(layoutOptions)

    // Populate cells with GIF content
    const populatedCells = populateCells(cells, generateCellContent)

    return {
        cells: populatedCells,
    }
}
</script>

<style lang="scss" scoped>
.mosaic-scroll {
    position: relative;
}
</style>
