<template>
  <div class="references" v-if="showReferences">
    <button class="btn btn-primary" :class="buttonClasses" @click="openModal">
      Verwijzingen
    </button>

    <modal ref="modal">
      <div class="modal-header">
        <h4 class="modal-title">{{references.length}} "{{itemName}}" verwijzing(en)</h4>
      </div>
      <div class="modal-body">
        <p v-show="isDeleteError" class="text-danger">
          Er zijn nog bestaande verwijzingen naar dit item vanuit:
        </p>
        <table class="table table-striped">
          <thead>
            <th>Type</th>
            <th>Naam</th>
            <th>Id</th>
          </thead>
          <tbody>
            <tr v-for="(reference, key) in references" :key="key">
              <td>
                {{reference.fromTypeName}}
              </td>
              <td v-if="reference.isPage">
                <router-link :to="{name: 'page-editor-version', params: { id: reference.fromValue.pageId, versionId: reference.fromId }}">{{getPageDisplayValue(reference)}}
                </router-link>
              </td>
              <td v-else>
                <router-link :to="{name: reference.baseTypeName.toLowerCase() + '-editor', params: { id: reference.fromId }}">{{getItemDisplayValue(reference)}}</router-link>
              </td>
              <td>{{reference.fromId}}</td>
            </tr>
          </tbody>
        </table>
        <p v-show="isDeleteError">
          Wijzig of verwijder deze items eerst.
        </p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" @click="closeModal">Sluit</button>
      </div>
    </modal>
  </div>
</template>

<style lang="scss">
  .references {
    .modal-body {
      max-height: 50vh;
      overflow: scroll;
    }
  }
</style>

<script>
import { handleFetch } from '../api/helpers'
import modal from './modal.vue'
import { getCmsItemDisplayTitle, getCmsPageDisplayTitle } from '../schema/schema-scripts'

export default {
  props: {
    itemId: {
      type: String,
      required: true,
    },
    itemName: {
      type: String,
      required: true,
    },
    buttonClasses: {
      type: Array
    }
  },
  data() {
    return {

      references: [],
      isDeleteError: false,
    };
  },
  mounted() {
    if (this.itemId) {
      this.getReferences();
    }
  },
  methods: {
    async getReferences() {
      try {
        const response = await handleFetch(`/references/to/${this.itemId}`);
        this.references = await response.json();
      } catch (error) {
        this.$store.dispatch('alerts/addError', 'Er ging helaas wat mis bij het ophalen van referenties.');
      }
    },
    getPageDisplayValue(reference) {
      return reference.fromValue && getCmsPageDisplayTitle(reference.fromValue) || reference.fromId;
    },
    getItemDisplayValue(reference) {
      return reference.fromValue && getCmsItemDisplayTitle(reference.fromValue) || reference.fromId;
    },
    _openModal(isDeleteError) {
      this.isDeleteError = isDeleteError;
      this.$refs.modal.show();
    },
    openModal() {
      this._openModal(false);
    },
    openErrorModal() {
      this._openModal(true);
    },
    closeModal() {
      this.$refs.modal.hide();
    },
  },
  computed: {
    showReferences() {
      return !!this.itemId && !!this.references.length;
    },
  },
  components: {
    modal,
  },
};
</script>
