<template>
  <Container v-if="props.character">
    <RoundRectangle :tween="tween" :x="tileToWorldX(props.layer, props.character.position_x, props.character.position_y)" :y="tileToWorldY(props.layer, props.character.position_x, props.character.position_y)" :origin-x="0.5" :origin-y="16" :fillColor="0xffffff" :width="74" :height="8" :radius="4" />
    <RoundRectangle :tween="tween" :x="tileToWorldX(props.layer, props.character.position_x, props.character.position_y)" :y="tileToWorldY(props.layer, props.character.position_x, props.character.position_y)" :origin-x="0.5" :origin-y="31.5" :fillColor="0x09ad19" :width="70" :height="4" :radius="4" />
    <Text
      :tween="tween"
      @create="createText"
      :text="props.character.name"
      :x="tileToWorldX(props.layer, props.character.position_x, props.character.position_y)"
      :y="tileToWorldY(props.layer, props.character.position_x, props.character.position_y)"
      :origin-x="0.5"
      :origin-y="7.5"
      :style="{
        fontFamily: 'Helvetica, Arial',
        color: '#FFF',
        fontSize: '14px'
      }"
    />
    <Container v-if="!props.character.characterType">
      <Image texture="character" :x="tileToWorldX(props.layer, props.character.position_x, props.character.position_y)" :y="tileToWorldY(props.layer, props.character.position_x, props.character.position_y)" :origin-y="1" />
    </Container>
    <Container v-else>
      <Sprite
        :tween="tween"
        :texture="charTexture"
        :play="props.character.isMoving ? charTexture : undefined"
        :x="tileToWorldX(props.layer, props.character.position_x, props.character.position_y)"
        :y="tileToWorldY(props.layer, props.character.position_x, props.character.position_y)"
        :origin-y="1"
        :flipX="props.character.rotation === 6 || props.character.rotation === 4"
        :flipY="false"
      />
    </Container>

  </Container>
</template>

<script lang="ts" setup>
import config from '@/config'
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 } from 'vue'

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

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

const currentVisualPosition = ref({ x: 0, y: 0 })

const tween = computed(() => {
  if (!props.character || !props.layer) return null

  const { position_x, position_y, isMoving } = props.character

  if (!isMoving) return null

  const targetX = tileToWorldX(props.layer, position_x, position_y)
  const targetY = tileToWorldY(props.layer, position_x, position_y)

  // Use the current visual position for the starting point
  const { x: currentX, y: currentY } = currentVisualPosition.value

  const tweenConfig = {
    x: targetX,
    y: targetY,
    duration: 750,
    ease: 'Power2',
    repeat: 0,
    yoyo: false,
    from: { x: currentX, y: currentY },
    to: { x: targetX, y: targetY },
    onComplete: () => {
      // Update the current visual position when the tween completes
      currentVisualPosition.value = { x: targetX, y: targetY }
    }
  }

  return tweenConfig
})

const charTexture = computed(() => {
  console.log('Character texture:', props.character)
  if (!props.character?.characterType?.sprite) {
    console.log('No character type or sprite found')
    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
})

watch(
  () => props.character,
  (newCharacter) => {
    if (newCharacter) {
      console.log('Character updated:', newCharacter)
      console.log('Rotation:', newCharacter.rotation)
      console.log('Current texture:', charTexture.value)
    } else {
      console.log('Character is null or undefined')
    }
  },
  { deep: true }
)

const createText = (text: Phaser.GameObjects.Text) => {
  text.setLetterSpacing(1.5)
}
</script>
