import { useModal } from 'vue-final-modal'
import { markRaw } from 'vue'
import CModalConfirmation from './CModalConfirmation.vue'
import CModal from '../CModal/CModal.vue'

export type ConfirmationModal = {
  title: string
  message: string
  inputProps?: { [key in string]: any }
  buttonHidden?: boolean
  firstLabel?: string
  secondLabel?: string
  isAlert?: boolean
  imageSrc?: string
}

export function openModalConfirmation({
  firstLabel,
  secondLabel,
  title = '',
  message = '',
  inputProps,
  buttonHidden = false,
  isAlert,
  imageSrc,
}: ConfirmationModal): Promise<{ ok: boolean; value?: string }> {
  return new Promise((resolve, reject) => {
    const vfm = useModal({
      component: markRaw(CModal),
      bind: { p_Title: title, p_ButtonHidden: buttonHidden },
      on: {
        'update:modelValue': (bool: boolean) => {
          if (bool) return
          vfm.hide()
          resolve({ ok: false })
        },
      },
      slots: {
        default: {
          component: markRaw(CModalConfirmation),
          bind: {
            class: '',
            firstLabel,
            secondLabel,
            message,
            inputProps,
            isAlert,
            imageSrc,
          },
          on: {
            cancel: (value?: string) => {
              vfm.hide()
              resolve({ ok: false, value })
            },
            ok: (value?: string) => {
              vfm.hide()
              resolve({ ok: true, value })
            },
          },
        },
      },
    })

    vfm.show()
  })
}

export function openModalSpinner(params?: {
  title?: string
  message?: string
  spinnerSize?: string
  imageSrc?: string
}): () => void {
  const {
    title = '読込中',
    message = '少々お待ち下さい',
    spinnerSize = '40',
    imageSrc,
  } = params || {}

  const vfm = useModal({
    component: markRaw(CModal),
    bind: { p_Title: title, p_ButtonHidden: true },
    slots: {
      default: {
        component: markRaw(CModalConfirmation),
        bind: { spinnerSize, imageSrc, message },
      },
    },
  })
  vfm.show()

  return vfm.hide
}