import { defu } from "defu"

export default function useDynamicDialog() {
  const nuxtApp = useNuxtApp()

  return nuxtApp.runWithContext(() => {
    const dialog = useDialog()

    const defaultOptions = {
      props: {
        modal: true,
        dismissableMask: true,
        showHeader: false,
        pt: {
          root: "z-90 w-11/12 max-w-128",
          content: "p-0"
        },
        ptOptions: { mergeProps: ptViewMerge }
      }
    }

    return {
      open: (component, options = {}) =>
        dialog.open(component, defu(options, defaultOptions))
    }
  })
}