<template>
  <Image :depth="1" texture="waypoint" :x="waypoint.x" :y="waypoint.y" :visible="waypoint.visible" />
</template>

<script setup lang="ts">
import { Image, useScene } from 'phavuer'
import { onBeforeUnmount, ref } from 'vue'
import { usePointerHandlers } from '@/composables/usePointerHandlers'
import { useCameraControls } from '@/composables/useCameraControls'

interface Props {
  layer: Phaser.Tilemaps.TilemapLayer
}

const props = defineProps<Props>()
const scene = useScene()

const waypoint = ref({
  visible: false,
  x: 0,
  y: 0
})

const { camera, isDragging } = useCameraControls(scene)
const { setupPointerHandlers, cleanupPointerHandlers } = usePointerHandlers(scene, props.layer, waypoint, camera, isDragging)

setupPointerHandlers()
onBeforeUnmount(cleanupPointerHandlers)
</script>
