import { RollPartSelect } from "./roll-part-select.mjs"
import { ROLLDIALOG_SECTION } from "./roll-part.mjs"

export const PART_CARAC = "carac"

export class RollPartCarac extends RollPartSelect {
  /** TODO: remplacer selectOption par une sorte de sélecteur plus sympa? */

  get code() { return PART_CARAC }
  get name() { return 'Caractéristiques' }
  get section() { return ROLLDIALOG_SECTION.CARAC }

  loadRefs(rollData) {
    const refs = this.getRefs(rollData)
    refs.all = this.$getActorCaracs(rollData)
    refs.caracs = refs.all
    this.$selectCarac(rollData)
  }

  choices(refs) { return refs.caracs }

  $getActorCaracs(rollData) {
    return Object.entries(rollData.active.actor.getCarac())
      .filter(([key, c]) => key != 'taille')
      /* TODO: filter by context */
      .map(([key, carac]) => {
        return RollPartCarac.$extractCarac(key, carac)
      })
  }

  static $extractCarac(key, carac) {
    return {
      key: key,
      label: carac.label,
      value: parseInt(carac.value)
    }
  }

  filterCaracs(rollData, allowed = []) {
    allowed = allowed.filter(it => it != undefined)
    const refs = this.getRefs(rollData)
    refs.caracs = allowed.length > 0
      // ? refs.all.filter(it => allowed.includes(Grammar.toLowerCaseNoAccent(it.key)))
      ? refs.all.filter(it => allowed.includes(it.key))
      : refs.all
    this.$selectCarac(rollData)
  }

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

  getAjustements(rollData) {
    return []
  }

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

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

  $selectCarac(rollData, key) {
    this.selectByKey(rollData, key, 10)
  }
}