import { Dialog, ErrorMessage } from "frappe-ui";
import { reactive, ref } from "vue";
import { withLegacyCloseContext } from "@opendesk/shared/formScripts";

let dialogs = ref([]);

export let Dialogs = {
  name: "Dialogs",
  render() {
    return dialogs.value.map((dialog) => (
      <Dialog
        title={dialog.title}
        size={dialog.size}
        icon={dialog.icon}
        position={dialog.position}
        actions={dialog.actions}
        open={dialog.show}
        onUpdate:open={(val) => (dialog.show = val)}
      >
        {{
          default: () => {
            return [
              dialog.message && (
                <p class="text-p-base text-ink-gray-7">{dialog.message}</p>
              ),
              dialog.html && <div v-html={dialog.html} />,
              <ErrorMessage class="mt-2" message={dialog.error} />,
            ];
          },
        }}
      </Dialog>
    ));
  },
};

export function createDialog(dialogOptions) {
  let dialog = reactive(dialogOptions);
  dialog.actions = withLegacyCloseContext(dialog.actions);
  dialog.key = "dialog-" + dialogs.value.length;
  dialog.show = false;
  setTimeout(() => {
    dialog.show = true;
  }, 0);
  dialogs.value.push(dialog);
}