<template>
  <Container ref="characterChatContainer" :depth="999">
    <RoundRectangle @create="createChatBubble" :origin-x="0.5" :origin-y="7.5" :fillColor="0xffffff" :width="194" :height="21" :radius="20" />
    <Text @create="createChatText" :style="{ fontSize: 13, fontFamily: 'Arial', color: '#000' }" />
  </Container>
</template>

<script setup lang="ts">
import type { MapCharacter } from '@/application/types'
import { Container, refObj, RoundRectangle, Text, useGame } from 'phavuer'
import { onMounted } from 'vue'

const props = defineProps<{
  mapCharacter: MapCharacter
}>()

const game = useGame()
const characterChatContainer = refObj<Phaser.GameObjects.Container>()

const createChatBubble = (container: Phaser.GameObjects.Container) => {
  container.setName(`${props.mapCharacter.character.name}_chatBubble`)
}

const createChatText = (text: Phaser.GameObjects.Text) => {
  text.setName(`${props.mapCharacter.character.name}_chatText`)
  text.setFontSize(13)
  text.setFontFamily('Arial')
  text.setOrigin(0.5, 10.9)
  text.setResolution(2)

  // Fix text alignment on Windows and Android
  if (game.device.os.windows || game.device.os.android) {
    text.setOrigin(0.5, 9.75)

    if (game.device.browser.firefox) {
      text.setOrigin(0.5, 10.9)
    }
  }
}

onMounted(() => {
  characterChatContainer.value!.setName(`${props.mapCharacter.character!.name}_chatContainer`)
  characterChatContainer.value!.setVisible(false)
})
</script>