<div
    x-data="{
        searchQuery: '',
        sliceStart: 0,
        sliceStop: 0,
        orderBy: '{% block scroll_queryset_order_by_field %}{% endblock %}',
        filterField: '{% block scroll_queryset_filter_field %}{% endblock %}',
        scrollQuerySet: Glue.querySet.{% block scroll_queryset_unique_name %}{% endblock %},
        items: [],
        isLoading: false,
        hasMore: true,
        increment: {% block increment %}25{% endblock %},
        templateCache: {},
        init() {
            localStorage.setItem('notificationTemplateCache', JSON.stringify({}))
            this.sliceStop = this.increment
            this.templateCache = this.loadTemplateCache()

            this.$watch('searchQuery', () => this.resetAndLoad())
            this.$watch('orderBy', () => this.resetAndLoad())
        },
        loadTemplateCache() {
            try {
                return JSON.parse(localStorage.getItem('notificationTemplateCache')) || {}
            } catch {
                return {}
            }
        },
        saveTemplateCache() {
            try {
                localStorage.setItem('notificationTemplateCache', JSON.stringify(this.templateCache))
            } catch {
                console.error('Template failed to cache')
            }
        },
        cacheKey(item) {
            return `${item.$pk}:${item.updated_datetime}`
        },
        async hydrateTemplates(items) {
            const idsToFetch = items
                .filter(item => !(this.cacheKey(item) in this.templateCache))
                .map(item => item.$pk)

            if (idsToFetch.length > 0) {
                let html = await Glue.fetch('{% url "django_spire:notification:app:template:render_templates" %}', {
                    body: JSON.stringify({ ids: idsToFetch }),
                    method: 'POST',
                })

                items
                    .filter(item => idsToFetch.includes(item.$pk))
                    .forEach(item => {
                        this.templateCache[this.cacheKey(item)] = html[item.$pk]
                    })

                this.saveTemplateCache()
            }

            items.forEach(item => {
                item.renderedTemplate = this.templateCache[this.cacheKey(item)]
            })
        },
        async loadMoreItems(reset = false) {
            if (this.isLoading || !this.hasMore) {
                return
            }

            this.isLoading = true

            const start = this.sliceStart
            const stop = this.sliceStop

            try {
                if (this.filterField !== '') {
                    this.scrollQuerySet = this.scrollQuerySet.filter({
                        [this.filterField + '__icontains']: this.searchQuery
                    })
                }

                if (this.orderBy !== '') {
                    this.scrollQuerySet = this.scrollQuerySet.orderBy(this.orderBy)
                }

                this.scrollQuerySet = this.scrollQuerySet.slice(start, stop)

                await this.scrollQuerySet.all()

                const nextItems = this.scrollQuerySet.items
                await this.hydrateTemplates(nextItems)

                if (reset) {
                    this.items = nextItems
                } else {
                    this.items = [...this.items, ...nextItems]
                }
                this.hasMore = nextItems.length >= this.increment

                this.sliceStart = stop
                this.sliceStop = stop + this.increment
            }
            finally {
                this.isLoading = false
            }
        },
        async resetAndLoad() {
            this.sliceStart = 0
            this.sliceStop = this.increment
            this.hasMore = true
            this.items = []
            await this.loadMoreItems(true)
        },
        async updateItem(pk, removed = false) {
            if (!pk) {
                return
            }

            if (removed) {
                await this.resetAndLoad()
                return
            }

            const item = await this.scrollQuerySet.get(pk)
            await this.hydrateTemplates([item])

            // TODO: delete this, should happen inside .get()
            item.$collection = this.scrollQuerySet
            const itemIndex = this.items.findIndex(existingItem => existingItem.$pk === item.$pk)

            if (itemIndex === -1) {
                this.items.unshift(item)
            }
            else {
                this.items[itemIndex] = item
            }
        },
        toggleOrder() {
            this.orderBy = this.orderBy.startsWith('-') ? this.orderBy.slice(1) : '-' + this.orderBy
        },
    }"
        @updated-item.window="
        if (!$event.detail?.querysetName || $event.detail.querysetName === scrollQuerySet._name) {
            updateItem($event.detail.pk, $event.detail.removed)
        }
    "
    class="{% block scroll_container_class %}{% endblock %}"
>

    <div class="row">
        <div class="col">
            {% block scroll_header %}
            {% endblock %}
        </div>
    </div>

    <div class="row">
        <div class="col">
            <div
                class="{% block scroll_content_class %}{% endblock %}"
                style="{% block scroll_content_style %}{% endblock %}"
            >
                {% block scroll_content %}
                    <template x-if="items.length > 0">
                        <template x-for="(item, itemIndex) in items" :key="item.id ?? itemIndex">
                            {% block scroll_template_item %}
                                <div x-html="item.renderedTemplate"></div>
                            {% endblock %}
                        </template>
                    </template>
                    <div x-show="(items.length === 0) && !isLoading" x-cloak>
                        <div
                            class="col p-3 text-center"
                            aria-live="polite"
                        >
                            You have no notifications...
                        </div>
                    </div>
                {% endblock %}
                <div
                    x-data="{
                        init() {
                            const observer = new IntersectionObserver((entries) => {entries.forEach((entry) => {
                                if (entry.isIntersecting) {
                                    if(hasMore) {
                                        loadMoreItems()
                                    }
                                }
                            })}, { threshold: [0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0] })
                            observer.observe($el)
                        }
                    }"
                    style="height: {% block scroll_sentinel_height %}1200{% endblock %}px; margin-top: -{% block scroll_sentinel_offset %}1200{% endblock %}px; pointer-events: none;"
                >
                </div>
            </div>
        </div>
    </div>

    <div x-show="hasMore && isLoading" x-cloak class="row">
        <div
            class="col p-3 text-center"
            aria-live="polite"
        >
            <span class="spinner-border spinner-border-sm" role="status">
                <span class="visually-hidden">Loading items...</span>
            </span>Loading items...
        </div>
    </div>

    <div class="row">
        <div class="col">
            {% block scroll_footer %}
            {% endblock %}
        </div>
    </div>
</div>