<template>
  <Image v-if="gameStore.isTextureLoaded(props.placedMapObject.mapObject.id)" v-bind="imageProps" />
</template>

<script setup lang="ts">
import type { PlacedMapObject, TextureData } from '@/application/types'
import { loadTexture } from '@/composables/gameComposable'
import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/mapComposable'
import { useGameStore } from '@/stores/gameStore'
import { Image, useScene } from 'phavuer'
import { computed, onMounted } from 'vue'
import config from '@/application/config'
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'

const props = defineProps<{
  placedMapObject: PlacedMapObject
}>()

const gameStore = useGameStore()
const scene = useScene()
const mapEditor = useMapEditorComposable()

const imageProps = computed(() => ({
  alpha: mapEditor.movingPlacedObject.value?.id == props.placedMapObject.id ? 0.5 : 1,
  tint: mapEditor.selectedPlacedObject.value?.id == props.placedMapObject.id ? 0x00ff00 : 0xffffff,
  depth: calculateIsometricDepth(props.placedMapObject.positionX, props.placedMapObject.positionY, props.placedMapObject.mapObject.frameWidth, props.placedMapObject.mapObject.frameHeight),
  ...calculateObjectPlacement(props.placedMapObject,false),
  flipX: props.placedMapObject.isRotated,
  texture: props.placedMapObject.mapObject.id,
  originX: props.placedMapObject.mapObject.originX,
  originY: props.placedMapObject.mapObject.originY
}))

function calculateObjectPlacement(mapObj: PlacedMapObject, tileCenterSnap: boolean) : {x: number; y: number} {
  let position : {x: number; y: number}
  if (tileCenterSnap) {
    let halfTileWidth = config.tile_size.width/2
    let halfTileHeight = config.tile_size.height/2
    position = {
      x: Math.ceil((mapObj.positionX-config.tile_size.height)/halfTileWidth) * halfTileWidth,
      y: Math.ceil((mapObj.positionY-config.tile_size.height)/halfTileWidth) * halfTileWidth,
    }
  }
  else {
    position = { x: mapObj.positionX, y: mapObj.positionY }
  }
  return {
    x: position.x-mapObj.mapObject.frameWidth/2,
    y: position.y-mapObj.mapObject.frameHeight/2
  }
}

onMounted(async () => {
  await loadTexture(scene, {
    key: props.placedMapObject.mapObject.id,
    data: '/textures/map_objects/' + props.placedMapObject.mapObject.id + '.png',
    group: 'map_objects',
    updatedAt: props.placedMapObject.mapObject.updatedAt,
    frameWidth: props.placedMapObject.mapObject.frameWidth,
    frameHeight: props.placedMapObject.mapObject.frameHeight
  } as TextureData).catch((error) => {
    console.error('Error loading texture:', error)
  })
})
</script>
