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

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

// Types
type WayPoint = { visible: boolean; x: number; y: number }

// Props
const props = defineProps<{ layer: Phaser.Tilemaps.TilemapLayer }>()

// Setup
const scene = useScene()
const waypoint = ref<WayPoint>({ visible: false, x: 0, y: 0 })
const { setupControls, cleanupControls } = useControlsComposable(scene, props.layer, waypoint)

// Event setup
setupControls()

// Cleanup
onBeforeUnmount(() => {
  cleanupControls()
})
</script>
