import { app } from '@/main'
import { genMount } from './mount'

export const mount = genMount(app)

export const renderCompoent = <P>(comp: ComponentConstructor<P>, props: P) => {
  const element = document.createElement('div')
  const { destroy } = mount(comp, { props, element })
  return () => {
    destroy()
    if (document.body.contains(element)) {
      document.body.removeChild(element)
    }
  }
}

export const renderModal = <P>(
  comp: ComponentConstructor<P>,
  propsRaw: Omit<P, 'onCancel'>
) => {
  const props = {
    ...propsRaw,
    onCancel: () => {
      destroy && destroy()
    }
  } as P

  const destroy = renderCompoent(comp, props)
}
