<script>
import HierarchyEdit from './HierarchyEdit.vue';

export default {
  components: {HierarchyEdit},
  props: {
    entryId: Number,
    lexicalUnitId: Number,
    initialUnifiedFrameId: Number,
  },
  emits: ['refreshEntriesList'],
  data() {
    return this.getInitialData();
  },
  methods: {
    getInitialData() {
      return {
        key: this.lexicalUnitId,
        entryIdLocal: this.entryId,
        unifiedFrameId: this.initialUnifiedFrameId,
        previewedUnifiedFrameId: -1
      };
    },
    goToDisplay() {
      this.unifiedFrameId = null;
    },
    refresh() {
      this.key = null;
      setTimeout(() => {
        this.key = this.lexicalUnitId;
      }, 0);
    },
    swapFrames(previewedUnifiedFrameId) {
      this.previewedUnifiedFrameId = this.unifiedFrameId;
      this.unifiedFrameId = previewedUnifiedFrameId;
      this.refresh();
    },
    refreshEntriesList() {
      this.$emit('refreshEntriesList');
    }
  },
  watch: {
    lexicalUnitId() {
      Object.assign(this, this.getInitialData());
    },
    initialUnifiedFrameId() {
      Object.assign(this, this.getInitialData());
    }
  },
};
</script>

<template>
  <div v-if="key || unifiedFrameId" :key="(key, entryIdLocal, unifiedFrameId)" class="row h-100 m-0 p-0 overflow-auto" id="semantics-top-pane">
    <hierarchy-edit
      ref="hierarchyEdit"
      v-if="unifiedFrameId"
      :key="unifiedFrameId"
      :readOnly="false"
      :unifiedFrameId="unifiedFrameId"
      :previewedUnifiedFrameId="previewedUnifiedFrameId"
      :initialRightPaneTab="previewedUnifiedFrameId && unifiedFrameId !== previewedUnifiedFrameId ? 'frame_preview' : 'schemata'"
      @go-to-display="goToDisplay"
      @swap-frames="swapFrames"
      @refresh-entries-list="refreshEntriesList"
    />
  </div>
</template>