<template>
  <Image v-for="object in zoneStore.zone?.zoneObjects" :depth="calculateIsometricDepth(object.positionX, object.positionY, object.object.frameWidth, object.object.frameHeight)" :key="object.id" v-bind="getObjectImageProps(object)" />
  <!--    <Text v-for="object in zoneStore.zone?.zoneObjects" :key="object.id" :depth="99999" :text="Math.ceil(calculateIsometricDepth(object.positionX, object.positionY, object.object.frameWidth, object.object.frameHeight))" v-bind="getObjectProps(object)" />-->
</template>

<script setup lang="ts">
import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
import { Image, Text } from 'phavuer'
import { useZoneStore } from '@/stores/zone'
import type { ZoneObject } from '@/types'

const zoneStore = useZoneStore()

const props = defineProps<{
  tilemap: Phaser.Tilemaps.Tilemap
}>()

const getObjectProps = (object: ZoneObject) => {
  return {
    x: tileToWorldX(props.tilemap as any, object.positionX, object.positionY),
    y: tileToWorldY(props.tilemap as any, object.positionX, object.positionY),
    originY: Number(object.object.originX),
    originX: Number(object.object.originY)
  }
}

const getObjectImageProps = (object: ZoneObject) => {
  return {
    x: tileToWorldX(props.tilemap as any, object.positionX, object.positionY),
    y: tileToWorldY(props.tilemap as any, object.positionX, object.positionY),
    texture: object.object.id,
    originY: Number(object.object.originX),
    originX: Number(object.object.originY)
  }
}
</script>
