<template>
  <div>
    <label class="control-label" :class="getLabelClass()">{{ getViewerFieldTranslation(name) }}</label>
    <SmartPhone v-if="fieldType == 'PhoneField'" class="input-display" :class="getValueClass()" :value="getValueDisplay(name)" :extension="(additional && additional.extension ? additional.extension : null)" />
    <div v-else class="input-display" :class="getValueClass()">{{ getValueDisplay(name) }}</div>
  </div>
</template>

<script>
import { inject } from 'vue'
import Utils from './lib/utils.js'
import { useI18n } from 'vue-i18n'

import SmartPhone from '@/components/SmartPhone'

export default {
  inject: ['getViewerFieldTranslation', 'getViewerFieldValue', 'getViewerFieldDefinition', 'getLabelClass', 'getValueClass'],
  props: {
    name: {
      type: String,
      required: true
    },
    additional: {
      type: Object,
      required: false,
      default: null
    }
  },
  setup : function(props){
    const {t} = useI18n()
    const getViewerFieldDefinition = inject('getViewerFieldDefinition')
    const fieldType = getViewerFieldDefinition(props.name).type
    return { t, fieldType }
  },
  methods: {
    getValueDisplay: function (name) {
      const value = this.getViewerFieldValue(name)

      if(this.fieldType == 'FaxField'){
        return value != '' && !isNaN(value) ? Utils.formatPhone(value) : this.t('ui.na')
      } else {
        return value ? value : this.t('ui.na')
      }
    }
  },
  components: {SmartPhone}
}
</script>
