<template>
  <Image v-for="object in zoneStore.zone?.zoneObjects" v-bind="getImageProps(object)" />
</template>

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

const zoneStore = useZoneStore()

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

const getImageProps = (object: ZoneObject) => {
  return {
    depth: calculateIsometricDepth(object.positionX, object.positionY, object.object.frameWidth, object.object.frameHeight),
    x: tileToWorldX(props.tilemap as any, object.positionX, object.positionY),
    y: tileToWorldY(props.tilemap as any, object.positionX, object.positionY),
    flipX: object.isRotated,
    texture: object.object.id,
    originY: Number(object.object.originX),
    originX: Number(object.object.originY)
  }
}
</script>
