<template>
  <v-dialog
    v-model="showDialog"
    max-width="720px"
    persistent
    style="z-index: 1005;"
    @keydown.esc="onClose"
  >
    <v-card
      min-height="700px"
      class="d-flex flex-column"
    >
      <v-card-title
        class="headline pb-0"
      >
        Seismic properties
      </v-card-title>
      <v-card-text class="pb-0">
        <v-container>
          <JsonForms
            :schema="schema"
            :ajv="ajv"
            :uischema="uischema"
            :data="nodeProps"
            :renderers="materialRenderers"
            :on-change="applyProperties"
          />
        </v-container>
      </v-card-text>
      <v-spacer />
      <v-card-actions>
        <v-spacer />
        <v-btn
          text
          @click="onApply"
        >
          Ok
        </v-btn>
        <v-btn
          text
          @click="onClose"
        >
          Close
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>
<script>
import {JsonForms} from 'jsonforms-vue';
import {materialRenderers} from 'jsonforms-vue-material';
import {VContainer, VDialog} from 'vuetify/lib';
import {uischema} from './uischema.js';

export default {
    name: 'SeismicPropertiesDialog',
    components: {VContainer, VDialog, JsonForms},
    props: {
        showDialog: Boolean,
        nodeProps: {
            type: Object,
            default: () => {}
        },
        ajv: {
            type: Object,
            default: () => {}
        },
        schema: {
            type: Object,
            default: () => {}
        }
    },
    data: function () {
        return {
            uischema: uischema,
            materialRenderers: [],
            propertiesData: null
        };
    },
    created () {
        this.materialRenderers = [...materialRenderers];
    },
    methods: {
        onClose () {
            this.$emit('close');
        },
        applyProperties (value) {
            const {errors, data} = value;
            this.propertiesData = errors.length > 0 ? null : data;
        },
        onApply () {
            this.$emit('close', this.propertiesData);
        }
    }
};
</script>

