frontend/marko/page/logs/components/add-filter-modal-body/component.js

const {channelApi} = require("../../../../../rpdata/api/Channel")
const {logHeaderApi} = require("../../../../../rpdata/api/LogHeader")

module.exports = class {
  onCreate() {
    this.state = {
      search: "",
      filters: [],
      channels: [],
      eventNames: [],
    }

    this.first = true
  }

  onInput(input) {
    if (input.filters) {
      if (this.timeout != null) {
        setTimeout(() => {
          this.searchFilters()
        }, 1)
      }
    }
  }

  onMount() {
    this.timeout = null

    if (this.state.channels.length === 0) {
      channelApi.list().then(channels => {
        this.state.channels = channels
        this.searchFilters()
      }).catch(err => {
        console.warn("Failed to fetch channels:", err)
      })
    }

    if (this.state.eventNames.length === 0) {
      logHeaderApi.eventNames().then(eventNames => {
        this.state.eventNames = eventNames
        this.searchFilters()
      }).catch(err => {
        console.warn("Failed to fetch eventNames:", err)
      })
    }

    this.getEl("search").addEventListener("keydown", ev => {
      if (this.waiting) {
        return
      }

      if (this.timeout != null) {
        clearTimeout(this.timeout)
      }

      this.timeout = setTimeout(() => {
        this.timeout = null
        this.state.search = ev.target.value

        this.searchFilters()
      }, 200)
    })
  }

  onUnmount() {
    clearTimeout(this.timeout)
    this.timeout = null

    this.state.search = ""
    this.state.filters = []
  }

  add(type, value, filter) {
    this.emit("add", type, value)

    this.state.filters = this.state.filters.filter(f => f != filter)
  }

  searchFilters() {
    const filters = []
    const search = this.state.search.toLowerCase()

    for (const channel of this.state.channels) {
      if (search == "" || channel.name.toLowerCase().includes(search)) {
        if (this.input.filter.channels && this.input.filter.channels.includes(channel.name)) {
          continue
        }
        
        filters.push({
          colorClass: "color-tag-location",
          text: channel.name,
          type: "channels",
          value: channel.name,
        })
      }
    }

    for (const name of this.state.eventNames) {
      if (search == "" || name.toLowerCase().includes(search)) {
        if (this.input.filter.events && this.input.filter.events.includes(name)) {
          continue
        }
        
        filters.push({
          colorClass: "color-tag-event",
          text: name,
          type: "events",
          value: name,
        })
      }
    }

    for (const character of this.input.characters) {
      if (search == "" || character.name.toLowerCase().includes(search)) {
        if (this.input.filter.characters && this.input.filter.characters.includes(character.id)) {
          continue
        }
        
        filters.push({
          colorClass: "color-tag-character",
          text: character.name,
          type: "characters",
          value: character.id,
        })
      }
    }

    filters.sort((a, b) => {
      let aCompare = a.text
      let bCompare = b.text

      if (a.text.charAt(0) === "#") {
        aCompare = a.text.slice(1)
      }
      if (b.text.charAt(0) === "#") {
        bCompare = b.text.slice(1)
      }

      return aCompare.localeCompare(bCompare)
    })

    this.state.filters = filters
  }

}