<script lang="ts"></script>

<script setup lang="tsx">
import { DialogService, ToastService } from '@/utils/primevue';
import dialogContent from './dialog-content.vue';

const dynamicComponent = defineComponent({
  props: {
    'defining-props': {
      type: Object as PropType<Record<string, unknown>>,
      default: () => ({}),
    },
  },
  setup(props, { attrs, emit }) {
    return () => (
      <div>
        <button onClick={() => emit('close')}>close</button>
        <div>PrimeVue DynamicDialog</div>
        <pre>{`${JSON.stringify({ attrs, props }, null, 2)}`}</pre>
      </div>
    );
  },
});
const openDialog = async () => {
  // TODO: primevue 的 dialog 代码有问题。https://github.com/primefaces/z/blob/bd7161298a472c8cd954e35e6a538a8bd1b1b386/packages/primevue/src/dynamicdialog/DynamicDialog.vue#L64
  // https://primevue.org/dynamicdialog/#import
  const dialog1 = DialogService.open(dynamicComponent, {
    props: {
      header: 'Header1 Drag Me',
      draggable: true,
      // 'pt:mask:class': 'backdrop-blur-sm',
      pt: {
        mask: {
          class: 'backdrop-blur-sm',
        },
      },
      position: 'bottomright',
    },
    emits: {
      // https://github.com/primefaces/primevue/blob/bd7161298a472c8cd954e35e6a538a8bd1b1b386/packages/primevue/src/dynamicdialog/DynamicDialog.vue#L5
      //   v-bind="instance.options.emits", 所以 props 也可以通过 emits 传递给 content 的组件
      'some-data': 'in-dialog',
      'defining-props': {
        'defined-props': 'in-dialog',
      },
      onClose: () => dialog1.close(),
    },
  });
  await nextTick();
  // if ($__DEV__) return;
  await new Promise((resolve) => setTimeout(resolve, 500));
  DialogService.open(dialogContent, {
    props: {
      header: 'Header2',
      position: 'bottomleft',
      // draggable: false,
    },
    data: {
      some: 'data',
    },
  });
};
const openToast = () => {
  ToastService.add({ severity: 'info', summary: 'Info', detail: 'Message Content', life: 3000 });
};
</script>

<template>
  <div class="primevue">
    <InputText />
    <Select
      :options="[
        { name: 'New York', code: 'NY' },
        { name: 'Rome', code: 'RM' },
        { name: 'London', code: 'LDN' },
        { name: 'Istanbul', code: 'IST' },
        { name: 'Paris', code: 'PRS' },
      ]"
      optionLabel="name"
      placeholder="选择城市"
      class="min-w-[200px]"
    />

    <DatePicker dateFormat="dd/mm/yy" />

    <Button @click="openToast"> ToastService </Button>
    <Button @click="openDialog"> DialogService </Button>
  </div>
</template>

<style>
.p-toast {
  max-width: calc(100% - 50px);
}
.p-toast .p-toast-message-text {
  margin-top: -0.2rem;
}
</style>
