import { ref, computed } from "vue";
import { getId } from "../handlers.js";
import { handleActive, ArrowVerticalKeyHandler, ArrowHorizontalKeyHandler, NumberKeyHandler } from "../handlers.js";

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

export default {
  props: ['active', 'title', 'text', 'buttons', "withshortkey", "stack"],
  setup(props, { emit }) {
    const handlers = [ArrowHorizontalKeyHandler];
    if (props.withshortkey) {
      handlers.push(NumberKeyHandler);
      console.log(handlers);
    }
    handleActive(props, handlers);
    const elements = computed(() => props.buttons.map((i) => { i.onClick = () => emit('resolve', i.result ); return i; }) );
    return { elements }
  },
  template: html`
  <div class="dialog overlay" v-if="active">
    <h2>{{ title }}</h2>
    <p>{{ text }}</p>
    <d-list :elements="elements" type="horizontal" :withshortkey="withshortkey"></d-list>
  </div>
  `
}