import { createApp } from "vue";
import App from "./App.vue";
import Modal from "vue-bs-modal";

// you have to import bootstrap css.
import "bootstrap/dist/css/bootstrap.min.css";
// import bootstrap icons (this is not required, you can use your own icon class)
import "bootstrap-icons/font/bootstrap-icons.css";

const app = createApp(App);
app.use(Modal).mount("#app");

 async beforeRouteLeave() {
    const confirmed = await this.$modal.confirm({
      title: "Unsaved Changes",
      message: "Are you sure you want to leave this page?",
    });
    return confirmed;
  }

 editProfile() {
      this.$modal
        .show({
          title: "Edit Profile",
          content: EditProfileComponent,
          rightBtnText: "Update",
          leftBtnText: "Discard",
          size: ModalSize.LARGE,
          // pass custom data as props to the EditProfileComponent.
          // the "modalRef" prop is passed to the content componet by default in case you want to close the modal inside your component.
          contentProps: {
            email: "[email protected]",
            username: "yellowbean"
          },
          center: true,
        })
        .then(({ confirmed, modalRef, data }) => {
          // confirmed will be true for right button click, false for left button or close button or backdrop click.
          // data will be the data field of the EditProfileComponent.
          if (confirmed) {
            // do something
          }

          // need to manually close the modal if you click the left/right button.
          // this is not required for confirmation dialog.
          modalRef.close();
        });
    },