<template>
  <jsv-focus-block
    :style="style"
    :autoFocus="autoFocus"
    :onAction="onAction">
    <div
      :class="(clicking ? 'clicking' : (focused ? 'focused' : 'normal'))"
      :style="{ ...style,
        left: 0, top: 0,
      }">
      <slot></slot>
    </div>
  </jsv-focus-block>
</template>

<script setup>
import { getCurrentInstance, shallowRef } from "vue";

const props = defineProps({
  style: {},
  autoFocus: false,
});

const self = getCurrentInstance();
const emit = defineEmits(['click', 'focus']);

const focused = shallowRef(false);
const clicking = shallowRef(false);

const onAction = {
  onFocus: () => {
    focused.value = true;
    emit('focus', self, true);
  },
  onBlur: () => {
    focused.value = false;
    emit('focus', self, false);
  },

  onKeyDown: (ev) => {
    if (ev.keyCode == 13) {
      clicking.value = true;
      emit('click', self);
      return true;
    }

    return false;
  },
  onKeyUp: (ev) => {
    if (ev.keyCode == 13) {
      clicking.value = false;
      return true;
    }

    return false;
  }
}

</script>

<style scoped>
.clicking {
  background-color: #00FFFF;
  font-size: 25;
}

.focused {
  background-color: #FF00FF;
  font-size: 25;
}

.normal {
  background-color: #FFFFFF;
  font-size: 20;
}
</style>