<script setup>
import { ref, inject, shallowRef, onMounted, computed } from "vue";

const props = defineProps({
  data: Object,
  query: Object,
  onEdge: Function,
  onAction: Object,
  frameChanged: Function,
  focusRectController: {
    type: Object,
  },
});

const focused = ref(false);
const parentWidget = inject("parentWidget");
const itemKeepScale = inject("itemKeepScale");
const divRef = shallowRef();

const onFocus = () => {
  parentWidget.value.slideToDiv(divRef.value, true);
  const rect = props.query.templatePosition(props.query.index);
  props.focusRectController?.onFocusChange(rect);
  focused.value = true;
};

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);

const scaleTransform = computed(() => {
  return itemKeepScale.value || focused.value
    ? "scale3d(1.1,1.1,1)"
    : "scale3d(1,1,1)";
});

onMounted(() => {});
</script>

<template>
  <div
    ref="divRef"
    :style="{
      fontSize: 40,
      width: data.width,
      height: data.height,
      color: '#FFFFFF',
      textAlign: 'center',
      lineHeight: data.height,
      transform: scaleTransform,
    }"
  >
    {{ data.content }}
  </div>
</template>

<style scoped></style>
