<template>
  <div class="schema-object-validator" :class="{ invalid: !isValid }">
    <p class="mb-1 text-danger" v-if="!isValid">{{ schema.title }} bevat validatiefouten</p>
    <schema-validator v-for="valueKey in valueKeys" :key="valueKey" :value="value[valueKey]" :schema="schemaProperties(valueKey)"></schema-validator>
  </div>
</template>

<script>
import schemaValidator from './schema-validator.vue';
import validatorGroupBase from '../tools/validator-group-base.vue';

export default {
  name: 'schema-object-validator',
  extends: validatorGroupBase,
  props: {
    value: {
      required: true,
    },
    schema: {
      type: Object,
      required: true,
    }
  },
  methods: {
    schemaProperties(key) {
      return this.schema.properties && this.schema.properties[key] ? this.schema.properties[key] : {};
    }
  },
  computed: {
    valueKeys() {
      return this.value ? Object.keys(this.value) : [];
    }
  },
  components: {
    schemaValidator
  }
};
</script>

<style lang="scss">
  .schema-object-validator {
    &.invalid + .card {
      $danger: #dc3545;

      border-color: $danger;

      > .card-header h5 {
        color: $danger;
      }
    }

    div {
      display: none;
    }
  }
</style>
