import { ReactRenderer } from '@tiptap/react'
import tippy from 'tippy.js'
import MentionList from './MentionList'

/**
 * TipTap suggestion configuration for @mentions.
 * Fetches users from /api/search/users?q=... as the user types.
 */
export default {
  items: async ({ query }) => {
    if (!query || query.length < 2) return []

    try {
      const res = await fetch(`/api/search/users?q=${encodeURIComponent(query)}&per_page=6`)
      if (!res.ok) return []
      const json = await res.json()
      return json.data ?? []
    } catch {
      return []
    }
  },

  render: () => {
    let component
    let popup

    return {
      onStart: (props) => {
        component = new ReactRenderer(MentionList, {
          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',
          theme: 'mention',
          arrow: false,
          offset: [0, 8],
        })
      },

      onUpdate: (props) => {
        component?.updateProps(props)

        if (!props.clientRect) return

        popup?.[0]?.setProps({
          getReferenceClientRect: props.clientRect,
        })
      },

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

      onExit: () => {
        popup?.[0]?.destroy()
        component?.destroy()
      },
    }
  },
}