<template>
  <MapTiles ref="mapTiles" @tileMap:create="tileMap = $event" />
  <PlacedMapObjects ref="mapObjects" v-if="tileMap" :tileMap="tileMap as Phaser.Tilemaps.Tilemap" />
  <MapEventTiles ref="eventTiles" v-if="tileMap" :tileMap="tileMap as Phaser.Tilemaps.Tilemap" />
</template>

<script setup lang="ts">
import config from '@/application/config'
import type { Map as MapT } from '@/application/types'
import MapEventTiles from '@/components/gameMaster/mapEditor/mapPartials/MapEventTiles.vue'
import MapTiles from '@/components/gameMaster/mapEditor/mapPartials/MapTiles.vue'
import PlacedMapObjects from '@/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue'
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
import { onUnmounted, shallowRef, useTemplateRef} from 'vue'

const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
const mapEditor = useMapEditorComposable()

const mapTiles = useTemplateRef('mapTiles')
const mapObjects = useTemplateRef('mapObjects')
const eventTiles = useTemplateRef('eventTiles')

function handlePointer(pointer: Phaser.Input.Pointer) {
  // Check if left mouse button is pressed
  if (!pointer.isDown) return

  // Check if shift is not pressed, this means we are moving the camera
  if (pointer.event.shiftKey) return

  // Check if alt is pressed
  if (!pointer.event.altKey) return

  // Check if draw mode is tile
  switch (mapEditor.drawMode.value) {
    case 'tile':
      mapTiles.value?.handlePointer(pointer)
    // case 'map_object':
    //   mapObjects.value.handlePointer(pointer)
    case 'event tile':
      eventTiles.value?.handlePointer(pointer)
  }
}

onUnmounted(() => {
  mapEditor.reset()
})
</script>
