import { Grammar } from "../grammar.js"
import { Misc } from "../misc.js"
import { RollPartSelect } from "./roll-part-select.mjs"
import { ROLLDIALOG_SECTION } from "./roll-part.mjs"

export const PART_COMP = "comp"

const SANS_COMPETENCE = { key: '', label: "Sans compétence", value: 0 }

export class RollPartComp extends RollPartSelect {

  /** TODO: remplacer selectOption par un sélecteur plus sympa (avec image de compétence, par exemple? */

  get code() { return PART_COMP }
  get name() { return 'Compétences' }
  get section() { return ROLLDIALOG_SECTION.COMP }

  loadRefs(rollData) {
    const refs = this.getRefs(rollData)
    const selected = this.getSelected(rollData)
    refs.all = this.$getActorComps(rollData)
      .filter(comp => !selected.forced ||
        (selected.key ?
        Grammar.includesLowerCaseNoAccent(comp.name, selected.key)
        : comp.key == '')
      )

    refs.comps = refs.all
    this.$selectComp(rollData)
  }

  choices(refs) { return refs.comps }

  $getActorComps(rollData) {
    const competences = (rollData.active.actor?.getCompetences() ?? [])
      .map(RollPartComp.$extractComp)
      .sort(Misc.ascending(it => Grammar.toLowerCaseNoAccentNoSpace(it.label)))
    /* TODO: filter competences */
    const listCompetences = [
      SANS_COMPETENCE,
      ...competences
    ]
    return listCompetences
  }

  static $extractComp(comp) {
    return {
      key: comp.name,
      label: comp.name,
      value: comp.system.niveau,
      comp: comp
    }
  }

  filterComps(rollData, allowed = []) {
    allowed = allowed.filter(it => it != undefined)
    const refs = this.getRefs(rollData)
    refs.comps = allowed.length > 0
      ? refs.all.filter(it => allowed.includes(it.label))
      : refs.all
    this.$selectComp(rollData)
  }

  prepareContext(rollData) {
    this.$selectComp(rollData)
  }

  setSpecialComp(rollData, comps) {
    this.getRefs(rollData).comps = comps.map(RollPartComp.$extractComp)
      .sort(Misc.ascending(it => Grammar.toLowerCaseNoAccentNoSpace(it.label)))
  }

  async _onRender(rollDialog, context, options) {
    const select = rollDialog.element.querySelector(`roll-section[name="${this.code}"] select`)

    select?.addEventListener("change", e => {
      const selectOptions = e.currentTarget.options
      const index = selectOptions.selectedIndex
      this.$selectComp(rollDialog.rollData, selectOptions[index]?.value)
      rollDialog.render()
    })
  }

  $selectComp(rollData, key) {
    this.selectByKey(rollData, key, 0)
  }

}