import {Controller} from '@hotwired/stimulus'
import {Editor} from "@tiptap/core"
import {Mention} from "@tiptap/extension-mention";
import StarterKit from "@tiptap/starter-kit"

export default class extends Controller {
  static targets = ['input', 'suggestions']

  connect() {
    this.editor = new Editor({
      element: this.inputTarget,

      extensions: [
        StarterKit,

        Mention.configure({
          suggestion: {
            allowSpaces: true,

            items: query => {
              return [
                'Lea Thompson', 'Cyndi Lauper', 'Tom Cruise', 'Madonna', 'Jerry Hall', 'Joan Collins', 'Winona Ryder', 'Christina Applegate', 'Alyssa Milano', 'Molly Ringwald', 'Ally Sheedy', 'Debbie Harry', 'Olivia Newton-John', 'Elton John', 'Michael J. Fox', 'Axl Rose', 'Emilio Estevez', 'Ralph Macchio', 'Rob Lowe', 'Jennifer Grey', 'Mickey Rourke', 'John Cusack', 'Matthew Broderick', 'Justine Bateman', 'Lisa Bonet',
              ].filter(item => item.toLowerCase().startsWith(query.toLowerCase())).slice(0, 5)
            },

            render: () => {
              return {
                onStart: props => {
                  this.element.suggestions.setProps(props)
                  this.element.suggestions.start()
                  this.element.suggestions.show()
                  this.element.suggestions.render()
                },

                onUpdate: async (props) => {
                  this.element.suggestions.setProps(props)
                  this.element.suggestions.render()
                },

                onKeyDown: (props) => {
                  if (props.event.key === 'Escape') {
                    return this.element.suggestions.hide()
                  }

                  if (props.event.key === 'Enter') {
                    return this.element.suggestions.select()
                  }

                  if (props.event.key === 'ArrowUp') {
                    return this.element.suggestions.up()
                  }

                  if (props.event.key === 'ArrowDown') {
                    return this.element.suggestions.down()
                  }

                  return false
                },

                onExit: () => {
                  this.element.suggestions.exit()
                },
              }
            }
          },
        }),
      ],
    })
  }
}