import { createApp } from 'vue'
import MinWindow from '@/components/liveMinWindow/index.vue'

let minWindowInstance = null

// 创建悬浮窗
export const showMinWindow = (snapshot, props = {}) => {
  if (minWindowInstance) {
    hideMinWindow()
  }

  const container = document.createElement('div')
  container.id = 'live-min-window-container'
  document.body.appendChild(container)

  const defaultProps = {
    snapshot,
    onClose: () => hideMinWindow(),
    initialPosition: {
      top: '80px',
      right: '16px'
    }
  }

  const app = createApp(MinWindow, {
    ...defaultProps,
    ...props
  })

  app.config.errorHandler = (err) => {
    console.error('MinWindow Error:', err)
    hideMinWindow()
  }

  minWindowInstance = app.mount(container)
  return minWindowInstance
}

export const hideMinWindow = () => {
  if (!minWindowInstance) return

  const el = minWindowInstance.$el
  el.style.transform = 'translateY(100%)'
  el.style.opacity = '0'

  const cleanup = () => {
    el.parentNode?.remove()
    minWindowInstance = null
  }
  
  if (document.startViewTransition) {
    document.startViewTransition(() => cleanup())
  } else {
    setTimeout(cleanup, 300)
  }
}