<template>
  <div ref="contentEditorPopupRef">
    <div v-show="showPopup && contentEditorPopup.length" class="content-editor-popup popup" :style="{ top: `${top}px`, left: `${left}px`, transform: `translateX(${!isMobileDevice && isOpen ? -130 : 0}px) translateY(5px)` }">
      <template v-for="(item, index) in contentEditorPopup" :key="`${item.dataElement || new Date()}-${index}`">
        <CustomButton v-if="item.name === 'customButton' && !item.hidden" :item="item" :data-element="item.dataElement" />
        <Button v-else-if="item.type === 'copy' && !item.hidden" @click="handlePopup('copy')" :title="$t('documentEditor.copy')" :data-element="item.dataElement"><CopyText /></Button>
        <Button v-else-if="item.type === 'delete' && !item.hidden" @click="handlePopup('delete')" :title="$t('delete')" :data-element="item.dataElement"><DeletePage /></Button>
        <Button v-else-if="item.type === 'property' && !item.hidden" @click="togglePropertyPanel" :title="$t('properties')" :data-element="item.dataElement" :isActive="isOpen"><PropertyPanel /></Button>
        <div v-else-if="['spacer', 'divider'].includes(item.type)" :class="item.type"></div>
      </template>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed, nextTick } from 'vue'
import core from '@/core'

import { useViewerStore } from '@/stores/modules/viewer'
import { useDocumentStore } from '@/stores/modules/document'
import { isMobileDevice } from '@/helpers/device'

const useViewer = useViewerStore()
const useDocument = useDocumentStore()

const contentEditorPopup = computed(() => useViewer.getPopupItems('contentEditorPopup'))
const isOpen = computed(() => useViewer.isElementOpen('contentEditorPanel'))

const showPopup = ref(false)
const top = ref(0)
const left = ref(0)
const contentEditorPopupRef = ref(null)

let documentContainer

const handlePopup = (tool) => {
  showPopup.value = false
  core.handleContentEditorPopup(tool)
}

const updatePopupPosition = async (data = {}) => {
  const { rect } = data

  showPopup.value = !!rect
  await nextTick()

  if (rect && showPopup.value) {
    const popup = contentEditorPopupRef.value.children[0]
    if (!popup) return

    const popupWidth = popup.offsetWidth
    const popupHeight = popup.offsetHeight + 10

    let initialLeft = rect.right - popupWidth
    let initialTop = rect.bottom

    const windowWidth = window.innerWidth
    const windowHeight = window.innerHeight

    // 检查水平位置
    if (initialLeft > windowWidth - popupWidth) {
      initialLeft = windowWidth - popupWidth
    }
    if (initialLeft < 0) initialLeft = 0

    // 检查垂直位置
    if (initialTop + popupHeight > windowHeight) {
      initialTop = Math.max(0, rect.top - popupHeight)
    }

    top.value = initialTop
    left.value = initialLeft
  }
}
core.addEvent('showContentEditorPopup', updatePopupPosition)

const scrollHandler = () => {
  if (showPopup.value) showPopup.value = false
}

const togglePropertyPanel = () => {
  useViewer.toggleElement('contentEditorPanel')
}

onMounted(() => {
  documentContainer = document.querySelector('.document-container')
  if (documentContainer) documentContainer.addEventListener('scroll', scrollHandler)
})

onUnmounted(() => {
  if (documentContainer) documentContainer.removeEventListener('scroll', scrollHandler)
})
</script>
