import Popup from '@/views/Earth/components/Popup'
import { NButton } from 'naive-ui'
import { useBaseDetail } from './baseDetail'

const popupMap: Map<string | number, any> = new Map()

export const useBasePopup = () => {
  return {
    popupMap,
    createPopup,
  }
}

function createPopup(
  id: string | number,
  position: Cesium.Cartesian3,
  data: TBaseNode
) {
  if (popupMap.has(id)) {
    return
  }
  const opts = {
    viewer,
    position,
    title: data.sheShiName,
    slotContent: generateContent(data),
    slotFooter: generateFooter(data),
    closeEvent: function () {
      if (popupMap.has(id)) {
        popupMap.get(id).windowClose()
        popupMap.delete(id)
      }
    },
  }
  const popup = new Popup(opts)
  popupMap.set(id, popup)
}

function generateContent(data: TBaseNode) {
  return h(
    'div',
    {},
    Object.keys(data).map(key => h('div', {}, `${key}：${data[key]}`))
  )
}
function generateFooter(data: TBaseNode) {
  const { showDetailsModal, showHisImagePreview } = useBaseDetail(data)

  return h('div', { class: 'flex gap-1 justify-end' }, [
    h(
      NButton,
      { size: 'tiny', onClick: () => showDetailsModal() },
      { default: () => '详情' }
    ),
    h(
      NButton,
      { size: 'tiny', onClick: () => showHisImagePreview() },
      { default: () => '历史图像' }
    ),
  ])
}
