<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, watch } from 'vue'
import { storeToRefs } from 'pinia'
import config from '@/config'
import { getTile, tileToWorldXY } from '@/services/zone'
import { useZoneEditorStore } from '@/stores/zoneEditor'
import { useGameStore } from '@/stores/game'

interface Props {
  layer: Phaser.Tilemaps.TilemapLayer
}

const props = defineProps<Props>()

const scene = useScene()
const zoneEditorStore = useZoneEditorStore()
const gameStore = useGameStore()
const { tool } = storeToRefs(zoneEditorStore)

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

const cam = ref(scene.cameras.main)
const isDragging = ref(false)
let pointerDownTimer: number | null = null
let pointerUpTimer: number | null = null

const DRAG_DELAY = 150
const MOVE_RESET_DELAY = 100

function updateWaypoint(pointer: Phaser.Input.Pointer) {
  const { x: px, y: py } = scene.cameras.main.getWorldPoint(pointer.x, pointer.y)
  const pointerTile = getTile(px, py, props.layer)

  if (!pointerTile) {
    waypoint.value.visible = false
    return
  }

  const worldPoint = tileToWorldXY(props.layer, pointerTile.x, pointerTile.y)
  waypoint.value = {
    visible: true,
    x: worldPoint.position_x,
    y: worldPoint.position_y + config.tile_size.y + 15
  }
}

function dragZone(pointer: Phaser.Input.Pointer) {
  if (!isDragging.value) return
  const { x, y, prevPosition } = pointer
  cam.value.scrollX -= (x - prevPosition.x) / cam.value.zoom
  cam.value.scrollY -= (y - prevPosition.y) / cam.value.zoom
}

function handleZoom(pointer: Phaser.Input.Pointer, _: unknown, __: unknown, deltaY: number) {
  if (pointer.event instanceof WheelEvent && pointer.event.altKey) {
    scene.scale.setZoom(scene.scale.zoom - deltaY * 0.01)
    cam.value = scene.cameras.main
  }
}

function onPointerDown(pointer: Phaser.Input.Pointer) {
  if (pointer.event instanceof MouseEvent && (pointer.event.altKey || tool.value === 'move')) {
    pointerDownTimer = setTimeout(() => {
      isDragging.value = true
      gameStore.setMovingCamera(true)
      scene.input.on(Phaser.Input.Events.POINTER_MOVE, dragZone)
    }, DRAG_DELAY)
  }
}

function onPointerUp() {
  if (pointerDownTimer) {
    clearTimeout(pointerDownTimer)
    pointerDownTimer = null
  }
  isDragging.value = false
  scene.input.off(Phaser.Input.Events.POINTER_MOVE, dragZone)

  if (pointerUpTimer) {
    clearTimeout(pointerUpTimer)
  }

  pointerUpTimer = setTimeout(() => {
    gameStore.setMovingCamera(false)
  }, MOVE_RESET_DELAY)
}

function setupEventListeners() {
  scene.input.on(Phaser.Input.Events.POINTER_MOVE, updateWaypoint)
  scene.input.on(Phaser.Input.Events.POINTER_WHEEL, handleZoom)
  scene.input.on(Phaser.Input.Events.POINTER_DOWN, onPointerDown)
  scene.input.on(Phaser.Input.Events.POINTER_UP, onPointerUp)
}

function cleanupEventListeners() {
  scene.input.off(Phaser.Input.Events.POINTER_MOVE, updateWaypoint)
  scene.input.off(Phaser.Input.Events.POINTER_MOVE, dragZone)
  scene.input.off(Phaser.Input.Events.POINTER_DOWN, onPointerDown)
  scene.input.off(Phaser.Input.Events.POINTER_UP, onPointerUp)
  scene.input.off(Phaser.Input.Events.POINTER_WHEEL, handleZoom)

  if (pointerDownTimer) {
    clearTimeout(pointerDownTimer)
    pointerDownTimer = null
  }
  if (pointerUpTimer) {
    clearTimeout(pointerUpTimer)
    pointerUpTimer = null
  }
}

setupEventListeners()

watch(tool, (newTool) => {
  if (newTool === 'move') {
    scene.input.on(Phaser.Input.Events.POINTER_MOVE, dragZone)
  } else {
    scene.input.off(Phaser.Input.Events.POINTER_MOVE, dragZone)
  }
})

onBeforeUnmount(cleanupEventListeners)
</script>
