<template>
  <v-expansion-panel>
    <v-expansion-panel-title>
      <div class="d-flex flex-row">
        <div class="charactername">{{ characterName }}</div>
        <div class="playername">( {{ playerName }} )</div>
      </div>
    </v-expansion-panel-title>
    <v-expansion-panel-text>
      <div>Alias: {{ alias }}</div>
      <JsonEditorVue v-model="json" v-bind="editorConfig" />
    </v-expansion-panel-text>
  </v-expansion-panel>
</template>

<style>
.charactername {
  font-weight: bold;
  margin-right: 10px;
}
</style>

<script setup lang="ts">
import JsonEditorVue from 'json-editor-vue'

import { computed } from 'vue'
import { Character, ListCharacterRequest } from '../proto/character'

const editorConfig = {
  mainMenuBar: false,
  navigationBar: false,
  readOnly: true,
}

const {
  character = {
    playerName: 'Unkown Player',
    characterName: 'Player Character',
    characterAlias: ['No Alias'],
    json: "",
  },
} = defineProps<{ character?: Character }>()

const playerName = computed(() => {
  return character.playerName || 'Unnamed Player'
})

const characterName = computed(() => {
  return character.characterName || 'Unnamed Character'
})

const alias = computed(() => {
  return (character.characterAlias || [])
    .map((entry) => '"' + entry + '"')
    .join(', ')
})

const json = computed(() => {
  return character.json || '{}'
})
</script>
