import { VueRenderer } from '@tiptap/vue-3'
import tippy from 'tippy.js'
import WikiPageList from '~/components/wiki/WikiPageList.vue'

// Wir brauchen Zugriff auf die rohen Items aus useWikiTree
// Da wir hier ausserhalb von setup() sind, müssen wir den State direkt holen oder übergeben.
// Einfacher: Wir nutzen useNuxtApp() oder übergeben die Items in der Config.

export default {
    items: ({ query }: { query: string }) => {
        // 1. Zugriff auf unsere Wiki Items
        const { items } = useWikiTree()

        // 2. Filtern
        const allItems = items.value || []
        return allItems
            .filter(item => item.title.toLowerCase().includes(query.toLowerCase()))
            .slice(0, 10) // Max 10 Vorschläge
    },

    render: () => {
        let component: any
        let popup: any

        return {
            onStart: (props: any) => {
                component = new VueRenderer(WikiPageList, {
                    props,
                    editor: props.editor,
                })

                if (!props.clientRect) return

                popup = tippy('body', {
                    getReferenceClientRect: props.clientRect,
                    appendTo: () => document.body,
                    content: component.element,
                    showOnCreate: true,
                    interactive: true,
                    trigger: 'manual',
                    placement: 'bottom-start',
                })
            },

            onUpdate(props: any) {
                component.updateProps(props)
                if (!props.clientRect) return
                popup[0].setProps({ getReferenceClientRect: props.clientRect })
            },

            onKeyDown(props: any) {
                if (props.event.key === 'Escape') {
                    popup[0].hide()
                    return true
                }
                return component.ref?.onKeyDown(props)
            },

            onExit() {
                popup[0].destroy()
                component.destroy()
            },
        }
    },
}