import { ref, shallowRef } from "vue";
import XEUtils from "xe-utils";

interface DialogProps {
  title: string;
  fullscreen?: boolean;
  width?: number | string;
  top?: string;
}

type CloseValue = "close" | "confirm" | "cancel";

export interface DialogExpose {
  // 如果报错了会阻止关闭弹窗
  confirm: () => any | Promise<any>;
  // 如果报错了会阻止关闭弹窗
  cancel: () => any | Promise<any>;
}

// eslint-disable-next-line @typescript-eslint/no-namespace
export namespace UseDialog {
  export interface Expose extends DialogExpose {}

  export interface Emits {
    (e: "cyDialogConfirm" | "cyDialogCancel", value?: any): void;
  }
}

export interface DialogOptions {
  dialogProps: DialogProps;
  showCancel?: boolean;
  showConfirm?: boolean;
  cancelText?: string;
  confirmText?: string;
  visible?: boolean;
  component?: any;
  componentRef?: DialogExpose;

  propsData?: {
    [key: string]: any;
  };
}

export interface DialogState extends DialogOptions {
  resolve: (val: { value: CloseValue; data: any }) => void;
  reject: (val: { value: CloseValue; data: any }) => void;

  dialogKey?: number;
  closeValue?: CloseValue;
}

export const dialogStore = ref<DialogState[]>([]);
export const dialogKey = ref(1);

export function useDialog(component: any, props: DialogOptions) {
  return new Promise<any>((resolve, reject) => {
    props = {
      visible: true,
      component: shallowRef(component),
      showCancel: true,
      showConfirm: true,
      ...props
    };
    dialogKey.value++;
    dialogStore.value.push({
      ...props,
      resolve: XEUtils.once(value => {
        resolve(value);
      }),
      reject: XEUtils.once(value => {
        reject(value);
      }),
      dialogKey: dialogKey.value,
      closeValue: "close"
    });
  });
}