<template>
  <div>
    <span class="icon-checkmark" v-if="value === true"></span>
    <span class="icon-cross" v-if="value === false"></span>
    <span v-if="typeof value !== 'boolean'">{{ displayValue }}</span>
  </div>
</template>

<script>
import dayjs from 'dayjs';

export default {
  props: ['value', 'schema', 'propertyName'],
  computed: {
    displayValue() {
      if (this.schema) {
        if (this.schema.enum) {
          // Enum value, use display name if possible
          let option = this.schema.options.find((option) => option.key == this.value);
          return option && option.displayName ? option.displayName : this.value;
        }
        if (this.schema.format === 'datetime-picker' || this.schema.format === 'date-picker') {
          return this.value !== null
            ? this.schema.format === 'datetime-picker'
              ? dayjs(this.value).format('YYYY-MM-DD LTS')
              : dayjs(this.value).format('YYYY-MM-DD')
            : '<geen>';
        }
      }
      return this.value;
    }
  }
};
</script>
