<template>
  <Container>
    <Rectangle :x="tileToWorldX(layer, props.character?.position_x, props.character?.position_y)" :y="tileToWorldY(layer, props.character?.position_x, props.character?.position_y)" :origin-x="0.5" :origin-y="16" :fillColor="0xffffff" :width="74" :height="8">
      <Rectangle :x="tileToWorldX(layer, props.character?.position_x, props.character?.position_y)" :y="tileToWorldY(layer, props.character?.position_x, props.character?.position_y)" :origin-x="0.5" :origin-y="31.5" :fillColor="0x09ad19" :width="70" :height="4" />
    </Rectangle>
    <Text
      @create="createText"
      :text="props.character?.name"
      :x="tileToWorldX(layer, props.character?.position_x, props.character?.position_y)"
      :y="tileToWorldY(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'
      }"
    />
    <Sprite ref="sprite" :x="tileToWorldX(layer, props.character?.position_x, props.character?.position_y)" :y="tileToWorldY(layer, props.character?.position_x, props.character?.position_y)" :origin-y="1" play="walk" />
  </Container>
</template>

<script lang="ts" setup>
import { Container, Rectangle, Sprite, Text } from 'phavuer'
import { type Character as CharacterT } from '@/types'
import { tileToWorldX, tileToWorldY } from '@/services/zone'

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

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

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