import { createApp } from "vue";
import SuccessAlert from "./Alerts/SuccessAlert.vue";
import ErrorAlert from "./Alerts/ErrorAlert.vue";
import InfoAlert from "./Alerts/InfoAlert.vue";
import ConfirmAlert from "./Alerts/ConfirmAlert.vue";

export function successAlert(contex) {
  createAlert(SuccessAlert, { ...contex });
}

export function errorAlert(contex) {
  createAlert(ErrorAlert, { ...contex });
}

export function infoAlert(contex) {
  createAlert(InfoAlert, { ...contex });
}

export function confirmAlert(contex) {
  createAlert(ConfirmAlert, { ...contex });
}

function createAlert(component, props) {
  let container = document.querySelector("#mdr-alert-container");

  if (!container) {
    container = document.createElement("div");
    container.className = "ginvoice gcargo";
    container.style.position = "fixed";
    container.style.display = "flex";
    container.style.flexDirection = "column";
    container.style.top = "0";
    container.style.right = "0";
    container.style.zIndex = "99999999999";
    container.style.margin = "16px 12px";
    container.style.gap = "10px";
    container.id = "mdr-alert-container";
    document.body.appendChild(container);
  }

  const div = document.createElement("div");
  container.appendChild(div);

  const app = createApp(component, props);

  const instance = app.mount(div);

  instance.toggle();
}
