<template>
  <Controls v-if="tileMapLayer" :layer="tileMapLayer" :depth="0" />
</template>

<script setup lang="ts">
import Controls from '@/components/utilities/Controls.vue'
import { loadTileTexturesFromMapTileArray, placeTiles } from '@/services/mapService'
import { MapStorage } from '@/storage/storages'
import { useMapStore } from '@/stores/mapStore'
import { useScene } from 'phavuer'
import { onMounted } from 'vue'

const scene = useScene()
const mapStore = useMapStore()
const mapStorage = new MapStorage()

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

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

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

  await loadTileTexturesFromMapTileArray(mapStore.mapId, scene)

  placeTiles(props.tileMap, props.tileMapLayer, map.tiles)
})
</script>
