<template>
  <div v-if="toolMode !== 'compare' && toolMode !== 'document'" class="header-items" :class="{ 'mobile': isMobileDevice }">
    <template v-if="!isMobileDevice" v-for="(item, index) in items" :key="`${item.type}-${item.dataElement || index}`">
      <CustomButton v-if="item.name === 'customButton' && !item.hidden && !item.dropItem" :item="item" />
      <ToggleElementButton v-else-if="item.type === 'toggleElementButton' && !item.hidden" :item="item" :class="{ disabled: !load }" :data-element="item.dataElement" />
      <ToolButton v-else-if="item.type === 'toolButton' && !item.hidden" :item="item" :data-element="item.dataElement" />
      <FullScreenButton v-else-if="item.type === 'fullScreenButton' && !item.hidden" :item="item" :class="{ disabled: !load }" :data-element="item.dataElement" />
      <HandButton v-else-if="item.type === 'handToolButton' && !item.hidden" :item="item" :class="{ disabled: !load }" :data-element="item.dataElement" />
      <CropPageButton v-else-if="item.type === 'cropPageButton' && !item.hidden" :item="item" :class="{ disabled: !load }" :data-element="item.dataElement" />
      <ZoomOverlay v-else-if="item.type === 'zoomOverlay' && !item.hidden" :data-element="item.dataElement" />
      <ThemeMode v-else-if="item.type === 'themeMode' && !item.hidden" :data-element="item.dataElement" />
      <ViewRotationControls v-else-if="item.type === 'viewRotationControls' && !item.hidden" :data-element="item.dataElement" />
      <div v-else-if="['spacer', 'divider'].includes(item.type)" :class="item.type"></div>
    </template>

    <template v-else v-for="(item, index) in items" :key="`${item.type}-${item.dataElement || index}-mobile`">
      <CustomButton v-if="item.name === 'customButton' && !item.hidden && !item.dropItem" :item="item" />
      <ToggleElementButton v-else-if="item.type === 'toggleElementButton' && !item.hidden" :item="item" :class="{ disabled: !load }" :data-element="item.dataElement" />
      <div v-else-if="item.type === 'selectTools' && !item.hidden" class="hand-tools" :class="{ 'events-none': !load }" :data-element="item.dataElement">
        <n-popover
          ref="popoverTool"
          placement="bottom"
          trigger="click"
          :show-arrow="false"
          to="#outerContainer"
          :raw="true"
        >
          <template #trigger>
            <Button class="drop-menu" :class="{ disabled: !load }">
              <CropPageIcon v-if="activeTool === 'cropPage'" />
              <SelectText v-else-if="['selectText', 'highlight', 'underline', 'squiggly', 'strikeout'].includes(activeTool)" />
              <Pantool v-else />
              <Arrow />
            </Button>
          </template>
          <div class="drop-down narrower hand-tools">
            <template v-for="(item, index) in items" :key="`${item.type}-${item.dataElement || index}`">
              <HandButton v-if="item.type === 'handToolButton' && !item.hidden" :item="item" :data-element="item.dataElement" :popoverTool="popoverTool" />
              <CropPageButton v-else-if="item.type === 'cropPageButton' && !item.hidden" :item="item" :data-element="item.dataElement" :popoverTool="popoverTool" />
              <Button v-else-if="item.type === 'selectTools' && !item.hidden" :data-element="item.dataElement" @click="changeSelectTextMode"><SelectText /></Button>
            </template>
          </div>
        </n-popover>
      </div>
      <OpenFileButton v-else-if="item.type === 'openFileButton' && !item.hidden" :item="item" :data-element="item.dataElement" />
    </template>

    <!-- 工具类 下拉框的形式 -->
    <div class="tool-container mobile" :class="{ 'events-none': !load }">
      <n-popover
        ref="popoverMode"
        placement="bottom"
        trigger="click"
        :show-arrow="false"
        to="#outerContainer"
        :raw="true"
        v-if="tools.length"
      >
        <template #trigger>
          <div class="drop-menu">
            <span>{{ showToolMode }}</span>
            <Arrow class="arrow-left" />
          </div>
        </template>
        <div class="drop-down narrower">
          <template v-for="(item, index) in tools" :key="`${item.dataElement || index}`">
            <div v-if="item.element === 'view' && !item.hidden" :data-element="item.dataElement" class="drop-item" :class="{ active: toolMode === 'view' }" @click="changeToolMode('view')">{{ $t('header.viewer') }}</div>
            <div v-else-if="item.element === 'annotation' && !item.hidden" :data-element="item.dataElement" class="drop-item" :class="{ active: toolMode === 'annotation' }" @click="changeToolMode('annotation')">{{ $t('header.annotations') }}</div>
            <div v-else-if="item.element === 'form' && !item.hidden" :data-element="item.dataElement" class="drop-item" :class="{ active: toolMode === 'form' }" @click="changeToolMode('form')">{{ $t('header.forms') }}</div>
            <div v-else-if="item.element === 'sign' && !item.hidden && webviewerMode === 'Standalone'" :data-element="item.dataElement" class="drop-item" :class="{ active: toolMode === 'sign' }" @click="changeToolMode('sign')">{{ $t('header.signatures') }}</div>
            <div v-else-if="item.element === 'security' && !item.hidden" :data-element="item.dataElement" class="drop-item" :class="{ active: toolMode === 'security' }" @click="changeToolMode('security')">{{ $t('header.security') }}</div>
            <div v-else-if="item.element === 'compare' && !item.hidden" :data-element="item.dataElement" class="drop-item" :class="{ active: toolMode === 'compare' }" @click="changeToolMode('compare')">{{ $t('header.compare') }}</div>
            <div v-else-if="item.element === 'editor' && !item.hidden" :data-element="item.dataElement" class="drop-item" :class="{ active: toolMode === 'editor' }" @click="changeToolMode('editor')">{{ $t('header.editor') }}</div>
          <div v-else-if="item.element === 'document' && !item.hidden" :data-element="item.dataElement" class="drop-item" :class="{ active: toolMode === 'document' }" @click="changeToolMode('document')">{{ $t('header.document') }}</div>
          </template>
        </div>
      </n-popover>
    </div>
    <div class="tool-container pc" :class="{ 'events-none': !load }">
      <div v-if="tools.length" class="tool-menu">
        <template v-for="(item, index) in tools" :key="`${item.dataElement || index}`">
          <div v-if="item.element === 'view' && !item.hidden" :data-element="item.dataElement" class="item" :class="{ active: toolMode === 'view' }" @click="changeToolMode('view')">{{ $t('header.viewer') }}</div>
          <div v-else-if="item.element === 'annotation' && !item.hidden" :data-element="item.dataElement" class="item" :class="{ active: toolMode === 'annotation' }" @click="changeToolMode('annotation')">{{ $t('header.annotations') }}</div>
          <div v-else-if="item.element === 'form' && !item.hidden" :data-element="item.dataElement" class="item" :class="{ active: toolMode === 'form' }" @click="changeToolMode('form')">{{ $t('header.forms') }}</div>
          <div v-else-if="item.element === 'sign' && !item.hidden && webviewerMode === 'Standalone'" :data-element="item.dataElement" class="item" :class="{ active: toolMode === 'sign' }" @click="changeToolMode('sign')">{{ $t('header.signatures') }}</div>
          <div v-else-if="item.element === 'security' && !item.hidden" :data-element="item.dataElement" class="item" :class="{ active: toolMode === 'security' }" @click="changeToolMode('security')">{{ $t('header.security') }}</div>
          <div v-else-if="item.element === 'compare' && !item.hidden" :data-element="item.dataElement" class="item" :class="{ active: toolMode === 'compare' }" @click="changeToolMode('compare')">{{ $t('header.compare') }}</div>
          <div v-else-if="item.element === 'editor' && !item.hidden" :data-element="item.dataElement" class="item" :class="{ active: toolMode === 'editor' }" @click="changeToolMode('editor')">{{ $t('header.editor') }}</div>
          <div v-else-if="item.element === 'document' && !item.hidden" :data-element="item.dataElement" class="item" :class="{ active: toolMode === 'document' }" @click="changeToolMode('document')">{{ $t('header.document') }}</div>
        </template>
      </div>
    </div>

    <div class="right-container">
      <template v-for="(item, index) in rightItems" :key="`${item.type}-${item.dataElement || index}`">
        <CustomButton v-if="item.name === 'customButton' && !item.hidden && !item.dropItem" :item="item" :data-element="item.dataElement" />
        <SearchButton v-else-if="item.type === 'searchButton' && !item.hidden" :item="item" :data-element="item.dataElement" />
        <ToggleRightPanelButton v-else-if="item.type === 'toggleRightPanelButton' && !item.hidden" :item="item" :disabled="!load" :data-element="item.dataElement" />
        <OpenFileButton v-else-if="item.type === 'openFileButton' && !item.hidden && !isMobileDevice" :item="item" :data-element="item.dataElement" />
        <PageMode v-else-if="item.type === 'pageModeButton' && !item.hidden && !isMobileDevice" :class="{ disabled: !load }" :data-element="item.dataElement" />
        <div v-else-if="['spacer', 'divider'].includes(item.type)" :class="item.type"></div>
      </template>
      <Dropdown :rightItems="rightItems" />
    </div>
  </div>

  <!-- 文档对比模式 -->
  <div v-else-if="toolMode === 'compare'" class="header-items">
    <template v-for="(item, index) in items" :key="`${item.type}-${item.dataElement || index}`">
      <FullScreenButton v-if="item.type === 'fullScreenButton' && !item.hidden" :item="item" :class="{ disabled: compareStatus !== 'finished' }" :data-element="item.dataElement" />
    </template>
    <div class="divider"></div>

    <CompareButtons />

    <div class="right-container">
      <template v-for="(item, index) in rightItems" :key="`${item.type}-${item.dataElement || index}`">
        <DownloadButton v-if="item.type === 'downloadButton' && !item.hidden" :item="item" :class="{ disabled: compareStatus !== 'finished' && compareStatus !== 'next' }" :data-element="item.dataElement" />
        <PrintButton v-if="item.type === 'printButton' && !item.hidden" :item="item" :class="{ disabled: compareStatus !== 'finished' && compareStatus !== 'next' }" :data-element="item.dataElement" />
      </template>
    </div>
  </div>

  <DocumentEditorHeader v-else-if="toolMode === 'document'" />
</template>

<script setup>
import { ref, computed, getCurrentInstance, watch } from 'vue'
import { useViewerStore } from '@/stores/modules/viewer'
import { useDocumentStore } from '@/stores/modules/document'
import { NPopover, NMessageProvider } from 'naive-ui'
import core from '@/core'
import { isMobileDevice } from '@/helpers/device'

const { switchTool, switchAnnotationEditorMode } = core

const instance = getCurrentInstance().appContext.app.config.globalProperties
const $t = instance.$t

const prop = defineProps(['items', 'rightItems', 'toolMode'])

const useViewer = useViewerStore()
const useDocument = useDocumentStore()
const popoverMode = ref(null)
const popoverTool = ref(null)
const compareStatus = computed(() => useViewer.getCompareStatus)
const load = computed(() => useViewer.getUpload && useViewer.getVerified && !useViewer.getUploadLoading)
const tools = computed(() => useViewer.getTools)
let showToolMode = computed(()=>{
  const data = {
    view: $t('header.viewer'),
    form: $t('header.forms'),
    annotation: $t('header.annotations'),
    sign: $t('header.signatures'),
    security: $t('header.security'),
    compare: $t('header.compare'),
    editor: $t('header.editor'),
    document: $t('header.document')
  }
  if (data[prop.toolMode]) {
    return data[prop.toolMode]
  }
  return ''
})

const webviewerMode = computed(() => useViewer.getWebviewerMode)
const activeTool = computed(() => useDocument.getActiveTool)
const showDropdown = computed(() => popoverTool.value && popoverTool?.value[0].getMergedShow())

const changeToolMode = (mode) => {
  if (webviewerMode.value !== 'Standalone' && ['editor', 'document'].includes(mode)) {
    if (mode === 'editor') useViewer.openElement('contentEditorPreventDialog')
    else useViewer.openElement('docEditorPreventDialog')
    return
  }
  if (mode === 'sign') {
    window.$message.info($t('signatures.tip'), {
      duration: 3000,
      showIcon: false
    })
  }
  useViewer.setActiveToolMode(mode)

  useDocument.setToolState('')
    
  useViewer.toggleActiveHand(false)
  switchTool(0)
  
  switchAnnotationEditorMode(0)

  popoverMode.value.setShow(false)

  if (mode === 'compare' || mode === 'document') {
    useViewer.resetPanels()
  }
}

const changeSelectTextMode = () => {
  popoverTool.value[0].setShow(false)
  useDocument.setToolState('selectText')

  switchTool(0)
  switchAnnotationEditorMode(0)

  useViewer.closeActiveStickNote()
  useViewer.setSearchStatus(false)
  useViewer.toggleActiveHand(false)
}
</script>

<style lang="scss">
.header-items {
  display: flex;
  align-items: center;
  width: 100%;

  .spacer {
    flex: 1;
    height: 100%;
  }

  .annotate-container {
    display: flex;
    align-items: center;
  }

  .tool-container {
    flex: 1;
    display: flex;
    justify-content: center;

    .tool-menu {
      display: flex;
      padding: 8px 12px;
      background: var(--c-tool-mode-bg);
      border: 1px solid var(--c-toolbar-border);
      border-radius: 2px;

      .item {
        min-width: 80px;
        text-align: center;
        font-size: 14px;
        line-height: 16px;
        font-weight: 700;
        cursor: pointer;
        color: var(--c-right-side-header-text);

        &+.item {
          margin-left: 16px;
        }

        &.active {
          color: var(--c-right-side-header-active);
        }
      }
    }
  }

  .right-container {
    display: flex;
    align-items: center;
  }

  .button {
    margin-right: 8px;
    padding: 5px;
  }
}

.header-items .tool-container .drop-menu {
  display: flex;
  align-items: center;
  margin-right: 8px;
  padding: 4px 8px;
  background: var(--c-tool-mode-bg);
  border: 1px solid var(--c-toolbar-border);
  border-radius: 2px;
  cursor: pointer;

  span {
    margin-right: 17px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    white-space: nowrap;
  }

  svg {
    min-width: 16px;
  }
}

.header-items .tool-container.mobile .drop-menu {
  justify-content: space-between;
  margin-right: 6px;

  span {
    margin-right: 0;
    line-height: 16px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.header-items .hand-tools .drop-menu {
  display: flex;
  align-items: center;
  margin-right: 7px;
  padding-left: 0;
  padding-right: 0;

  :last-child {
    margin-left: 4px;
  }
}

.n-popover:has(.drop-down) {
  box-shadow: none;

  .drop-down.hand-tools {
    padding: 4px;

    .button {
      margin-right: 0;
      padding: 4px 8px;
    }
  }
}

.events-none {
  pointer-events: none;
}

@media screen and (max-width: 425px) {
  .header-items .tool-container.mobile .drop-menu {
    width: 90px;
  }
}

@media screen and (max-width: 1536px) {
  .tool-container.pc {
    display: none !important;
  }

  .drop-down.narrower {
    border-radius: 4px;

    .drop-item {
      padding: 5px 8px;
      font-size: 14px;
      line-height: 16px;
      font-weight: 700;
    }
  }
}

@media screen and (min-width: 1537px) {
  .tool-container.mobile {
    display: none !important;
  }
}
</style>
