import dialogContent from './__dialog-content.vue';

const dynamicComponent = defineComponent({
  props: {
    'defining-props': {
      default: () => ({}),
      type: Object as PropType<Record<string, unknown>>,
    },
  },
  setup(props, ctx) {
    const dialogRef = usePrimevueDialogRef();
    return () => (
      <div>
        <button onClick={() => ctx.emit('close')}>emit('close')</button> <hr />
        <pre>{JSON.stringify({ 'dialogRef?.data': dialogRef!.value.data }, null, 2)}</pre> <hr />
        <div>PrimeVue DynamicDialog</div> <hr />
        <pre>{`${JSON.stringify({ 'ctx.attrs': ctx, props }, null, 2)}`}</pre> <hr />
        <pre>{JSON.stringify({ "inject('dialogRef')": dialogRef!.value }, null, 2)}</pre> <hr />
      </div>
    );
  },
});

// https://primevue.org/dynamicdialog/
export const openDialog = async () => {
  const dialog1 = DialogService.open(dynamicComponent, {
    data: {
      用inject接收: '通过 DynamicDialogOptions.data 传递的数据',
    },
    emits: {
      // https://github.com/primefaces/primevue/blob/bd7161298a472c8cd954e35e6a538a8bd1b1b386/packages/primevue/src/dynamicdialog/DynamicDialog.vue#L5
      //   ↑v-bind="instance.options.emits", 所以 props 也可以通过 emits 传递给 content 的组件
      'defining-props': {
        '用-props-接收': '定义在-DynamicDialogOptions.emits-的数据',
      },
      onClose: () => dialog1.close(),
      绑定给组件的attrs: '定义在-DynamicDialogOptions.emits-的数据，',
    },
    props: {
      draggable: true,
      header: '对话框1 可以拖动',
      position: 'bottomleft',
      pt: { mask: { class: 'backdrop-blur-sm' } }, // 相当于: pt:mask:class="backdrop-blur-sm"
    },
  });

  await nextTick();
  // if (__DEV__) return;

  await new Promise((resolve) => setTimeout(resolve, 300));
  DialogService.open(dialogContent, {
    props: {
      header: '对话框2',
      // draggable: false, // Header1的 draggable: true 会影响 Header2，如果指定 draggable: false，则不会受到影响。
    },
  });
};

export const openConfirm = async () => {
  ConfirmationService.require({
    accept: () => {
      ToastService.add({ detail: '您已同意操作', life: 3000, severity: 'info', summary: '已确认' });
    },
    // rejectProps: { style: { display: 'none' } },
    acceptProps: { label: '确定' },
    header: '确认',
    icon: 'pi pi-exclamation-triangle',
    message: '确定要继续吗？',
    reject: () => {
      ToastService.add({ detail: '您已取消操作', life: 3000, severity: 'error', summary: '已取消' });
    },
    rejectProps: { label: '取消', outlined: true, severity: 'secondary' },
  });
};