<script setup>
import { ref, defineProps, defineEmits } from "vue";
import { SessionUser } from "@/components/session/token/SessionUser.vue";
import { getTitle, getDataColumns } from "@/components/forms/other/MassDataInserter.vue";
import MassDataInsertTable from "@/components/forms/other/elements/MassDataInsertTable.vue";
import MassDataInsertControls from "@/components/forms/other/elements/MassDataInsertControls.vue";
import MassDataInsertButtonSave from "@/components/forms/other/elements/MassDataInsertButtonSave.vue";
import MassDataInsertProgress from "@/components/forms/other/elements/MassDataInsertProgress.vue";


const emit = defineEmits(["closeModal", "saveChanges"]);

const closeModal = () => {
  emit("closeModal");
}

// Listen for esc key to close the modal
const handleKeydown = (event) => {
  if (event.key === "Escape") {
    closeModal();
  }
};
const modal = ref(null);
window.addEventListener("keydown", handleKeydown);
</script>

<template>
  <div class="modal is-active" ref="modal">
    <div class="modal-background" @click="closeModal"></div>
    <div class="modal-card">
      <header class="modal-card-head">
        <p class="modal-card-title">{{ getTitle() }}</p>
        <button class="delete" aria-label="close" @click="closeModal"></button>
      </header>
      <section class="modal-card-body">
        <div class="notification is-warning">
          <strong>Under udvikling...</strong>
          <p>Denne funktion kan kun tage import af data i særlig format, den bør derfor endnu ikke bruges uden at være sat ind i denne.</p>
        </div>
        <!-- Controls -->
        <MassDataInsertControls />
        <!-- Progress -->
        <MassDataInsertProgress />
        <!-- Table -->
        <MassDataInsertTable />
      </section>
      <footer class="modal-card-foot">
        <MassDataInsertButtonSave />
      </footer>
    </div>
  </div>
</template>

<style scoped>

</style>