<script setup>
import { shallowRef, inject } from "vue";
import imgSrc from "../assets/jpegDemo.jpeg";

const focusSize = inject("focusSize");

const props = defineProps({
  data: Object,
  query: Object,
  onAction: Object,
});

const focused = shallowRef(false);
const divRef = shallowRef(null);

const onFocus = () => {
  focused.value = true;
  if (focusSize) {
    divRef.value?.jsvGetBoundingClientRect().then(
      (data) => {
        focusSize.width = data.width;
        focusSize.height = data.height;
        focusSize.left = data.left;
        focusSize.top = data.top;
      },
      (error) => {
        console.log("get absolute position failed", error);
      }
    );
  }
};

const onBlur = () => {
  focused.value = false;
};

const onClicked = () => {
  console.log("item clicked", props.data);
};

props.onAction.register("onFocus", onFocus);
props.onAction.register("onBlur", onBlur);
props.onAction.register("onClick", onClicked);
</script>

<template>
  <div
    v-if="query.index == 1"
    ref="divRef"
    :class="focused ? 'focus' : 'blur'"
    :style="{
      width: data.width,
      height: data.height,
      color: '#FFFFFF',
      backgroundColor: data.color,
    }"
  >
    {{ data.content }}
  </div>
  <img
    v-else
    ref="divRef"
    :class="focused ? 'focus' : 'blur'"
    :src="`url(${imgSrc})`"
    :style="{
      width: data.width,
      height: data.height,
    }"
  />
</template>

<style scoped>
.focus {
  transform: scale3d(1.2, 1.2, 1);
  transition: transform 0.25s linear;
  font-size: 30;
}

.blur {
  transform: scale3d(1, 1, 1);
  transition: transform 0.25s linear;
  font-size: 30;
}
</style>
