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

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

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