import { createApp } from 'vue'
import CToast from './CToast.vue'
import '../../css/global.sass'

// Position型の定義
export type Position = 'top' | 'right' | 'bottom' | 'left'

/**
 * useCToastPlugin関数は、指定したメッセージを使ってCToastコンポーネントを描画し、表示します。
 * @param message トーストメッセージの内容
 */
export function useCToastPlugin(
  message: string,
  position: Position,
  duration: number,
  component: any
) {
  const positionObj = positionClass(position)
  // すでに登録されているかどうかを確認
  const hasTestElement = document.contains(document.getElementById(positionObj.id))
  // CToastコンポーネントを生成するVueアプリケーションを作成
  const app = createApp(CToast, {
    p_message: message,
    p_position: position,
    p_duration: duration,
    p_component: component,
  })

  // 初回発火の処理
  if (!hasTestElement) {
    const toastContainer = document.createElement('div')
    toastContainer.classList.add(positionObj.class)
    toastContainer.setAttribute('id', positionObj.id)
    document.body.appendChild(toastContainer)
  }

  const newDiv = document.createElement('div')

  newDiv.style.marginBottom = '10px'
  // newDiv.style.transition = 'margin-bottom 0.3s ease'

  // newDiv.style.opacity = '0'

  // CToastコンポーネントをDOMコンテナにマウント
  app.mount(newDiv)

  // Domが発行されたことを確認して変更処理を行う
  const searchResultToastContent = document.getElementById(positionObj.id)!
  searchResultToastContent.style.backgroundColor = 'red'
  newDiv.style.transition = 'opacity 0.3s ease'
  searchResultToastContent.appendChild(newDiv)

  setTimeout(() => {
    searchResultToastContent.removeChild(newDiv)
  }, 99000)
}

// 位置クラスを検索する算出プロパティ
const positionClass = (position: string) => {
  return { class: `_c_toast_${position}`, id: `${position}top-toast-content` }
}