import { createApp, nextTick } from 'vue'
import { createComponentInstance } from '../Library'
import type { OpenDataSourceBindPanelEventType } from './type'
import App from './App.vue'
import { CustomEventType, RootEl } from '@/constant'
import { CellAttributeKeyEnum } from '@/enums/cellAttributeEnum'
import { ModeEnum } from '@/enums/modeEnum'
import { getAppInstanceId } from '@/utils/draw'

document.addEventListener(CustomEventType.OPEN_DATA_SOURCE_BIND_PANEL, async (event) => {
  const { detail } = event as CustomEvent<OpenDataSourceBindPanelEventType>
  const { open, cell, App: ui } = detail || {}
  await nextTick()

  const componentKey = cell.getAttribute(CellAttributeKeyEnum.COMPONENT_KEY)
  const categoryKey = cell.getAttribute(CellAttributeKeyEnum.CATEGORY)
  const id = cell.getId()
  const config = createComponentInstance({ key: componentKey, category: categoryKey }, { mode: ModeEnum.EDIT, instanceInfo: { id: getAppInstanceId(cell) }, cellInfo: { id }, cellBounds: cell.geometry })

  if (open && cell) {
    const el = document.getElementById(RootEl.DATA_SOURCE_BIND_PANEL)
    el && createApp(App, { cell, App: ui, config }).mount(el)
  }
})