<template>
  <div :class="{ 'text-right': alignRight.includes(field.type), 'field-display': true }">
    <label v-if="displayLabel" class="form-label text-secondary">{{ field.title }}: </label>
    <span v-if="field.attributes && field.attributes.find(a => a.key === 'prefix')" class="field-prefix">{{ field.attributes.find(a => a.key === 'prefix').value }}</span>
    
    <span v-if="field.type === 'number'">{{ formatNumber(Number(value)) }}</span>
    <span v-else-if="field.type === 'boolean'">{{ value ? 'Da' : 'Nu' }}</span>
    <span v-else-if="field.type === 'color'" class="field-color" :style="{ backgroundColor: String(value) }"></span>
    <span v-else>{{ value }}</span>

    <span v-if="field.attributes && field.attributes.find(a => a.key === 'suffix')" class="field-suffix">{{ field.attributes.find(a => a.key === 'suffix').value }}</span>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { keyValueTableFields } from '@/types'
import { alignRight } from './utils'

export default defineComponent({
  props: {
    field: {
      type: Object as PropType<typeof keyValueTableFields[number]>,
      required: true,
    },
    value: {
      type: [String, Number, Boolean, Object],
      required: false,
    },
    displayLabel: {
      type: Boolean,
      required: false,
      default: false,
    },
    defaultLocale: {
      type: String,
      required: false,
      default: 'ro-RO',
    },
  },
  data() {
    return {
      alignRight,
    }
  },
  methods: {
    formatNumber(value: number) {
      return value.toLocaleString(this.defaultLocale)
    },
  },
})
</script>

<style lang="scss" scoped>
.field {
  width: 100%;
}
.field-display {
  line-height: 38px;
}
.field-color {
  width: 25px;
  height: 25px;
  border-radius: 4px;
  display: inline-block;
  vertical-align: middle;
  margin-top: -5px;
}
.form-label {
  display: inline-block;
  font-size: 0.8rem;
  line-height: 1rem;
  margin-bottom: -2px;
  margin-right: .25rem;
}
</style> 