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:  ['players', 'stack', 'active', 'input'],
  setup(props, context) {
    handleActive(props, [ArrowVerticalKeyHandler]);
    const children = computed(() => {
      return props.players.map((p) => {
        return {
          component: "d-playerElem",
          props: {"player": p},
          onClick: () => {
            context.emit('resolve', p);
          }
        }
      })
    });
    return { children }
  },
  template: html`
  <div class="playerselect">
    <!-- <h2>Select Player</h2> -->
    <d-list title="Select Player" :withshortkey="true" :elements="children"/>
  </div>
  `
}