import { h } from 'vue'
import { NButton } from 'naive-ui'
import Popup from '@/views/Earth/components/Popup'
import { useMubiaoDetail } from './mubiaoDetail'
import { useMBTrajectory } from '../components/HisTrajectory/hooks/mbTraj'

const popupMap: Map<string | number, any> = new Map()
const { showDetailsMubiao } = useMubiaoDetail()
export const useMubiaoPopup = () => {
  return {
    popupMap,
    createPopup,
  }
}

function createPopup(
  id: string | number,
  entity: Cesium.Entity,
  mbData: Record<string, any>
) {
  if (popupMap.has(id)) {
    return
  }
  const opts = {
    viewer,
    entity: entity,
    title: mbData.targetName,
    // content: 'ceshi',
    slotContent: generateContents(mbData),
    slotFooter: generateFooters(mbData),
    closeEvent: function () {
      if (popupMap.has(id)) {
        popupMap.get(id).windowClose()
        popupMap.delete(id)
      }
    },
  }
  const popup = new Popup(opts)
  popupMap.set(id, popup)
}

function generateContents(mbData: Record<string, any>) {
  return h(
    'div',
    {},
    Object.keys(mbData).map(key => h('div', {}, `${key}：${mbData[key]}`))
  )
}

const { showOrHideHisTraj } = useMBTrajectory()
function generateFooters(mbData: Record<string, any>) {
  return h('div', { class: 'flex gap-1 justify-end' }, [
    h(
      NButton,
      { size: 'tiny', onClick: () => showDetailsMubiao(mbData) },
      { default: () => '详情' }
    ),
    h(
      NButton,
      { size: 'tiny', onClick: () => showOrHideHisTraj(mbData) },
      { default: () => '轨迹回放' }
    ),
  ])
}
