<template>
  <transition name="modal-fade" v-if="isModalVisible">
    <div class="modal-backdrop" role="dialog">
      <div class="modal" ref="modal">
        <header class="modal-header">
          <slot name="header">
            <h3>
              {{ popup_title }}
            </h3>
          </slot>
        </header>

        <section class="modal-body edit-body" v-if="popup_type=='edit'">
          <slot name="body">
            <div class="d-all">
              <label>
                Name: <br />
                <input
                  type="text"
                  class="input-full-radius edit-name"
                  readonly="readonly"
                  v-model="popup_content.name"
                />
              </label>
            </div>

            <div class="d-all">
              <label>
                Slug: <br />
                <input
                  type="text"
                  class="input-full-radius"
                  v-model="popup_content.slug"
                />
              </label>
            </div>
          </slot>
        </section>

        <section
          class="modal-body delete-body"
          v-if="popup_type=='delete' || popup_type=='delete_bulk'"
        >
          <slot name="body">
            <p v-if="popup_type=='delete_bulk'">
              By proceeding you will be deleting the following entities:
            </p>
            <p v-else>
              By proceeding you will be deleting the following entity
            </p>

            <div
              class="delete-content text-center"
              v-if="popup_type=='delete_bulk'"
            >
              <h4 class="entity" v-for="entity in popup_content">
                {{ entity }}
              </h4>
              <span class="delete-warning"
                >This is a permanent action &amp; cannot be undone.</span
              >
            </div>

            <div class="delete-content text-center" v-else>
              <h4 class="entity">{{ popup_content.name }}</h4>
              <span class="delete-warning"
                >This is a permanent action &amp; cannot be undone.</span>
            </div>
          </slot>
        </section>

        <footer class="modal-footer">
          <slot name="footer">
            <div class="row">
              <div class="d-1of2">
                <a class="btn btn-green" @click="closeEditEntity"> Cancel </a>
              </div>

              <div class="d-1of2 padding-right">
                <button
                  class="enstract-button eb-full-width update"
                  v-if="popup_type=='edit'"
                  @click="updateEntity"
                >
                  Update
                </button>
                <button
                  class="enstract-button eb-full-width delete-btn"
                  v-if="popup_type=='delete' || popup_type=='delete_bulk'"
                  @click="deleteEntity"
                >
                  Delete
                </button>
              </div>
            </div>
          </slot>
        </footer>
      </div>
    </div>
  </transition>
</template>
<script>
export default {
  props: ['isModalVisible', 'popup_title', 'popup_type', 'popup_content'],
  data () {
    return {
      edit: {
        name: '',
        slug: '',
      }
    }
  },
  methods: {
    updateEntity() {
      this.$emit('updateEntity', this.popup_content);
    },
    deleteEntity () {
      this.$emit('destroyEntity', this.popup_content);
    },
    closeEditEntity() {
      this.$emit('closeEditEntity', false);
    }
  }
}
</script>