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

<script>
import moment from 'moment';
import { mapState } from "vuex";

export default {
  props: ['value', 'schema'],
  computed: {
    ...mapState('pages', [
      'allPages'
    ]),
    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') {
          return this.value !== null
            ? moment(this.value).format("Y-MM-DD LTS")
            : "<geen>";
        }
        if (this.schema.format == 'page-picker') {
          const page = this.allPages.find(page => page.id == this.value);
          return page ? page.name : "<geen>";
        }
      }
      return this.value;
    },
  },
};
</script>
