<template>
  <Container v-if="props.character" :x="currentX" :y="currentY">
    <!--    Start chat bubble -->
    <!--    <RoundRectangle :origin-x="0.5" :origin-y="7.5" :fillColor="0xffffff" :width="194" :height="21" :radius="5" />-->
    <!--    <Text @create="createText" :text="`This is a chat message 🤯👋`" :origin-x="0.5" :origin-y="10.9" :style="{ fontSize: 13, fontFamily: 'Arial', color: '#000' }" />-->
    <!--    End chat bubble -->
    <Text @create="createText" :text="props.character.name" :origin-x="0.5" :origin-y="9" />
    <RoundRectangle :origin-x="0.5" :origin-y="18.5" :fillColor="0xffffff" :width="74" :height="6" :radius="5" />
    <RoundRectangle :origin-x="0.5" :origin-y="36.4" :fillColor="0x00b3b3" :width="70" :height="3" :radius="5" />
    <Image v-if="!props.character.characterType" texture="character" :origin-y="1" />
    <Sprite v-else :texture="charTexture" :play="props.character.isMoving ? charTexture : undefined" :origin-y="1" :flipX="props.character.rotation === 6 || props.character.rotation === 4" :flipY="false" />
  </Container>
</template>

<script lang="ts" setup>
import { Container, Image, RoundRectangle, Sprite, Text } from 'phavuer'
import { type ExtendedCharacter as CharacterT } from '@/types'
import { tileToWorldX, tileToWorldY } from '@/services/zone'
import { watch, computed, ref, onMounted, onUnmounted } from 'vue'

interface Props {
  layer: Phaser.Tilemaps.TilemapLayer
  character?: CharacterT
}

const props = withDefaults(defineProps<Props>(), {
  character: undefined
})

const currentX = ref(0)
const currentY = ref(0)
const tween = ref<Phaser.Tweens.Tween | null>(null)
const isInitialPosition = ref(true)

const updatePosition = (x: number, y: number) => {
  const targetX = tileToWorldX(props.layer, x, y)
  const targetY = tileToWorldY(props.layer, x, y)

  if (isInitialPosition.value) {
    currentX.value = targetX
    currentY.value = targetY
    isInitialPosition.value = false
    return
  }

  if (tween.value && tween.value.isPlaying()) {
    tween.value.stop()
  }

  const distance = Math.sqrt(Math.pow(targetX - currentX.value, 2) + Math.pow(targetY - currentY.value, 2))
  const duration = distance * 5 // Adjust this multiplier to control overall speed

  tween.value = props.layer.scene.tweens.add({
    targets: { x: currentX.value, y: currentY.value },
    x: targetX,
    y: targetY,
    duration: duration,
    ease: 'Linear',
    onUpdate: (tween) => {
      currentX.value = tween.targets[0].x ?? 0
      currentY.value = tween.targets[0].y ?? 0
    }
  })
}

watch(
  () => props.character,
  (newChar, oldChar) => {
    if (newChar) {
      if (!oldChar || newChar.positionX !== oldChar.positionX || newChar.positionY !== oldChar.positionY) {
        updatePosition(newChar.positionX, newChar.positionY)
      }
    }
  },
  { immediate: true, deep: true }
)

const charTexture = computed(() => {
  if (!props.character?.characterType?.sprite) {
    return 'idle_left_down'
  }

  const rotation = props.character.rotation
  const spriteId = props.character.characterType.sprite.id
  const action = props.character.isMoving ? 'walk' : 'idle'

  if (rotation === 2 || rotation === 4) {
    return `${spriteId}-${action}_left_down`
  } else if (rotation === 0 || rotation === 6) {
    return `${spriteId}-${action}_right_up`
  }

  return `${spriteId}-${action}_left_down` // Default fallback
})

const createText = (text: Phaser.GameObjects.Text) => {
  text.setFontSize(13)
  text.setFontFamily('Arial')
}

onMounted(() => {
  if (props.character) {
    updatePosition(props.character.positionX, props.character.positionY)
  }
})

onUnmounted(() => {
  if (tween.value) {
    tween.value.stop()
  }
})
</script>
