import { createApp, h, ref, computed, watch, reactive } from 'vue'
import Toast from './Toast.vue'
/**
 * トーストのインスタンス数
 * トーストの内部処理をいじるとき以外は触らないこと
 */
export const currentIndexNum = ref(0)
export function useToast(
  toastTitle: string,
  toastMovingTime = 6,
  toastType: 'success' | 'error' = 'success'
) {
  currentIndexNum.value++
  const componentVNode = h(Toast, {
    toastText: toastTitle,
    toastMovingTime: toastMovingTime,
    toastType: toastType,
  })

  const container = document.createElement('div')
  const app = createApp(componentVNode)
  app.mount(container)
  setTimeout(() => {
    app.unmount()
    container.remove()
    currentIndexNum.value--
  }, toastMovingTime * 1000 * 2)
}