<template>
  <PlacedMapObject v-for="placedMapObject in items" :tileMap :tileMapLayer :placedMapObject />
</template>

<script setup lang="ts">
import type { PlacedMapObject as PlacedMapObjectT } from '@/application/types'
import PlacedMapObject from '@/components/game/map/partials/PlacedMapObject.vue'
import { MapStorage } from '@/storage/storages'
import { useMapStore } from '@/stores/mapStore'
import { onMounted, ref } from 'vue'

import TilemapLayer = Phaser.Tilemaps.TilemapLayer

defineProps<{
  tileMap: Phaser.Tilemaps.Tilemap
  tileMapLayer: TilemapLayer
}>()

const mapStore = useMapStore()
const mapStorage = new MapStorage()
const items = ref<PlacedMapObjectT[]>([])

onMounted(async () => {
  if (!mapStore.mapId) return

  const map = await mapStorage.get(mapStore.mapId)
  if (!map) return

  items.value = map.placedMapObjects
})
</script>
