import { nextTick, reactive, ref, computed, onMounted, onUnmounted } from "vue";
import { handleActive, ArrowVerticalKeyHandler, ArrowHorizontalKeyHandler, NumberKeyHandler } from "../handlers.js";

const html = (v) => { return v[0] };

const mappings = {
  "player": ["d-playerElem", (p) => {return {"player": p} }],
  "scorer": ["d-scorerElem", (p) => {return {"scorer": p} }],
  "plain": ["d-plainElem", (p) => {return {"text": p} }],
}

export default {
  props:  ['options', 'type', 'title', 'stack', 'active', 'input'],
  setup(props, context) {
    handleActive(props, [ArrowVerticalKeyHandler, NumberKeyHandler]);
    const children = computed(() => {
      return props.options.map((o) => {
        return {
          component: props.type ? mappings[props.type][0] : "d-plainElem",
          props: props.type ? mappings[props.type][1](o) : {"text": o},
          onClick: () => {
            context.emit('resolve', o);
          }
        }
      })
    });
    return { children }
  },
  template: html`
  <div class="playerselect">
    <d-list :title="title" :withshortkey="true" :elements="children"/>
  </div>
  `
}