import { Role } from "@/store/role";
import { extendProps, mountComponent } from "@/helper/mount";
import EditRole from "./edit.vue";

export type DetailProps = { roleId?: Role["id"]; edit?: boolean };

export const showRole = (roleId: Role["id"]) => {
  return new Promise<void>((resolve, reject) => {
    const destroy = mountComponent(EditRole, {
      roleId,
      edit: false,
      onQuit: () => {
        destroy();
        resolve();
      },
      onSuccess() {
        destroy();
        resolve();
      },
    });
  });
};

export const editRole = (roleId: Role["id"]) => {
  return new Promise<Role | null>((resolve, reject) => {
    const destroy = mountComponent(EditRole, {
      roleId,
      edit: true,
      onQuit: () => {
        destroy();
        resolve(null);
      },
      onSuccess(role: Role) {
        destroy();
        resolve(role);
      },
    });
  });
};

export const addRole = () => {
  return new Promise<Role | null>((resolve, reject) => {
    const destroy = mountComponent(EditRole, {
      edit: true,
      onQuit: () => {
        destroy();
        resolve(null);
      },
      onSuccess(role: Role) {
        destroy();
        resolve(role);
      },
    });
  });
};
