frontend/marko/page/story-content/components/story-tag-options/component.js

const {tagApi} = require("../../../../../rpdata/api/Tag")

module.exports = class {
  onCreate() {
    this.state = {
      values: {
        name: "",
        kind: "Character",
      },
      tags: [],
      suggestions: [],
    }
  }

  onMount() {
    tagApi.list().then(list => {
      this.state.tags = list
    }).catch(err => {})

    this.getEl("name").addEventListener("keydown", ev => {
      setTimeout(() => {
        const name = this.getEl("name").value
        const kind = this.getEl("kind").value
        const search = name.toLowerCase()

        this.state.values = {name, kind}
        this.state.suggestions = []

        const suggestions = this.state.tags.filter(t => t.name.toLowerCase().includes(search))
        if (suggestions.length > 0 && suggestions.length < 20) {
          if (suggestions.length > 1 || suggestions[0].name !== name) {
            this.state.suggestions = suggestions
          }
        }
      }, 100)
    })
  }
  
  add(tag) {
    this.state.values = {
      kind: "Event",
      name: "",
    }

    this.emit("add", tag)
  }

  change(key, ev) {
    const value = ev.target.value

    this.state.values[key] = value
  }

  applySuggestion(tag) {
    this.state.values = {
      name: tag.name,
      kind: tag.kind,
    }

    this.state.suggestions = []
  }
}