import { ref } from 'vue'

export interface ConfirmDialogExpose {
  open: (title: string, message: string) => Promise<boolean>
}

export const ConfirmDialog = () => {
  let
    resolver: ((value: boolean) => void) | null = null

  const
    visible = ref<boolean>(false),
    title = ref<string>(''),
    message = ref<string>(''),

    open = (t: string, m: string) => {
      title.value = t
      message.value = m
      visible.value = true

      return new Promise<boolean>((resolve) => {
        resolver = resolve
      })
    },

    close = (result: boolean) => {
      visible.value = false
      resolver?.(result)
      resolver = null
    },

    confirm = () => close(true),
    cancel = () => close(false)

  vineExpose({ open })

  return vine`
    <dialog :open="visible" @click="cancel()">
      <article @click.stop>
        <h3>{{ title }}</h3>
        <p>{{ message }}</p>
        <footer>
          <button @click="cancel()">Cancel</button>
          <button class="contrast" @click="confirm()">Confirm</button>
        </footer>
      </article>
    </dialog>
  `
}