<script>
import { Options, Vue } from "vue-class-component";

@Options({
  props: {
    style: Object,
    autoFocus: Boolean,
    name: String,
    onClick: Function,
  }
})

class Button extends Vue {
  constructor(props) {
    super(props);

    this.hasFocused = false;
  }

  onFocus() {
    this.hasFocused = true;
  }

  onBlur() {
    this.hasFocused = false;
  }

  onKeyDown(ev) {
    if(ev.keyCode === 13) { // Enter
      this.onClick?.();
      return true;
    }
    return false;
  }

  getAction() {
    return {
      onFocus: this.onFocus,
      onBlur: this.onBlur,
      onKeyDown: this.onKeyDown
    }
  }
}

export default Button;
</script>

<template>
<jsv-focus-block :name="name" :autoFocus="autoFocus?'':undefined"
  :onAction="getAction()"
>
  <div class="item"
      :style="{
        ...style,
        backgroundColor: hasFocused ? '#FFFF00' : '#A8A8A8',
      }"
  >
    <slot/>
  </div>
</jsv-focus-block>
</template>

<style scoped>
.item {
  text-align: center;
  font-size: 24;
  line-height: 40;
}
</style>