import { ElMessage, useNamespace } from "element-plus";
import { ref } from "vue";

function message(msg: string, type: string, isHtml: boolean) {
  return ElMessage({
    type: type,
    // @ts-ignore
    duration: 3500,
    dangerouslyUseHTMLString: isHtml,
    message: msg,
    showClose: true,
    grouping: true,
  });
}

export const xcMessage = {
  success: (msg: string, isHtml = false) => {
    return message(msg, "success", isHtml);
  },
  danger: (msg: string, isHtml = false) => {
    return message(msg, "error", isHtml);
  },
  info: (msg: string, isHtml = false) => {
    return message(msg, "info", isHtml);
  },
  warning: (msg: string, isHtml = false) => {
    return message(msg, "warning", isHtml);
  },
  error: (msg: string, isHtml = false) => {
    return message(msg, "error", isHtml);
  },
};

export function useCyNamespace(name: string) {
  return useNamespace(name, ref("cy"));
}