<script>
// Define a function to show the modal with the Vue component
import {createApp} from "vue";
import MassDataInserterModal from "@/components/displays/modals/MassDataInserterModal.vue";
import Swal from "sweetalert2";

export const showMassDataInsertModal = async (onSuccessFunction = () => {}) => {
  // Create a container element for the Vue component
  const div = document.createElement('div')

  // Dynamically create and mount the Vue component
  // And add a prop to the component "onCustomerSelected"
  const app = createApp(MassDataInserterModal, {
    onClose: () => {
      // Close the modal
      Swal.close()
      // Return
    }
  })


  // Mount the Vue app to the dynamically created `div`
  app.mount(div)

  // Show SweetAlert2 dialog with the Vue component rendered inside
  await Swal.fire({
    html: div, // Include the Vue component’s container
    showCancelButton: false,
    showConfirmButton: false,
    allowOutsideClick: false,
    heightAuto: true,
    // Add custom CSS to the modal 80% width on open
    didOpen(popup) {
      // Add custom CSS to the ".modal-card" element
      const modalCard = popup.querySelector('.modal-card');
      if (modalCard) {
        modalCard.style.width = '80%';
      }
    },
    didDestroy: () => {
      // Clean up the Vue app when the modal is closed
      app.unmount()
    }
  }).finally(() => {
    // Return the selected invoice collection ID
    return onSuccessFunction()
  })
}
</script>