Types

export type ModalId = number | string | symbol

export interface Template<T extends Component> {
  component: T
  attrs?: MaybeRefOrGetter<ComponentProps<T>>
  emits?: MaybeRefOrGetter<PickComponentEmits<ComponentProps<T>>>
  props?: MaybeRefOrGetter<PickComponentProps<ComponentProps<T>>>
  /** A string slot is rendered as raw HTML, like `v-html`: never pass user-provided content as a string. */
  slots?: {
    [K in keyof ComponentSlots<T>]?: string | Component | Template<Component>
  }
}

export type ModalTemplate<T extends Component> = Template<T>

export type UseModalOptions<T extends Component> = Omit<ModalTemplate<T>, 'component'> & {
  defaultModelValue?: boolean
  keepAlive?: boolean
  component?: T
}

export interface UseModalReturnType {
  open: () => Promise<ModalOpenResult>
  close: () => Promise<ModalCloseResult>
  destroy: () => void
  status: Readonly<Ref<ModalStatus>>
}

export type ModalStatus = 'closed' | 'opening' | 'opened' | 'closing'

export type ModalOpenResult = 'opened' | 'already-opened' | 'stopped' | 'toggled-again' | 'destroyed' | 'skipped-on-server'

export type ModalCloseResult = 'closed' | 'already-closed' | 'stopped' | 'toggled-again' | 'destroyed'

export interface ModalToggle {
  (show: true): Promise<ModalOpenResult>
  (show: false): Promise<ModalCloseResult>
  (show?: boolean): Promise<ModalOpenResult | ModalCloseResult>
}

export type Vfm = {
  install: (app: App) => void
  modals: ComputedRef<ModalExposed>[]
  openedModals: ComputedRef<ModalExposed>[]
  openedModalOverlays: ComputedRef<ModalExposed>[]
  get: (modalId: ModalId) => undefined | ComputedRef<ModalExposed>
  toggle: VfmToggle
  open: (modalId: ModalId) => undefined | Promise<ModalOpenResult>
  close: (modalId: ModalId) => undefined | Promise<ModalCloseResult>
  closeAll: () => Promise<PromiseSettledResult<ModalCloseResult>[]>
}

export interface VfmToggle {
  (modalId: ModalId, show: true): undefined | Promise<ModalOpenResult>
  (modalId: ModalId, show: false): undefined | Promise<ModalCloseResult>
  (modalId: ModalId, show?: boolean): undefined | Promise<ModalOpenResult | ModalCloseResult>
}

export type ModalExposed = {
  modalId: Ref<undefined | ModalId>
  hideOverlay: Ref<undefined | boolean>
  overlayBehavior: Ref<undefined | 'auto' | 'persist'>
  overlayVisible: Ref<boolean>
  status: Readonly<Ref<ModalStatus>>
  toggle: ModalToggle
}