<template>
  <n-popover
    ref="popover"
    placement="top-start"
    trigger="click"
    :show-arrow="false"
    to="#outerContainer"
    :raw="true"
    :z-index="4"
  >
    <template #trigger>
      <Button v-show="!isNoItems" class="more" :class="{ active: showDropdown, disabled: !load }">
        <More /><Arrow />
      </Button>
    </template>
    <div class="drop-down">
      <template v-for="(item, index) in rightItems" :key="`${item.type}-${item.dataElement || index}`">
        <div v-if="item.type === 'downloadButton' && !item.hidden" :data-element="item.dataElement" class="drop-item" @click="downloadFile"><DownloadButton />{{ $t('header.download') }}</div>
        <div v-if="item.type === 'flattenButton' && !item.hidden" :data-element="item.dataElement" class="drop-item" @click="handleFlatten"><FlattenButton />{{ $t('header.flatten') }}</div>
        <div v-if="item.type === 'printButton' && !item.hidden" :data-element="item.dataElement" class="drop-item" @click="handlePrint"><PrintButton />{{ $t('header.print') }}</div>
        <div v-if="item.type === 'themeMode' && !item.hidden && isMobileDevice" :data-element="item.dataElement" class="drop-item" @click="handleThemeMode('Light')">
          <Button><HollowLight /></Button>{{ $t('header.lightMode') }}
        </div>
        <div v-if="item.type === 'themeMode' && !item.hidden && isMobileDevice" :data-element="item.dataElement" class="drop-item" @click="handleThemeMode('Dark')">
          <Button><Dark /></Button>{{ $t('header.darkMode') }}
        </div>
      </template>

      <template v-for="(item, index) in rightItems" :key="`${item.type}-${item.dataElement || index}`">
        <div v-if="item.type === 'pageModeButton' && !item.hidden && isMobileDevice" :data-element="item.dataElement" class="drop-item" @click="changePageViewStatus">
          <Button><Pageset /></Button>{{ $t('header.viewSetting') }}
        </div>
      </template>
      
      <template v-for="(item, index) in rightItems" :key="`${item.type}-${item.dataElement || index}`">
        <div v-if="item.type === 'settingButton' && !item.hidden" :data-element="item.dataElement" class="drop-item" @click="handleSettings">
          <Button><Settings /></Button>{{ $t('header.settings.settings') }}
        </div>
        <div v-if="item.name === 'customButton' && item.dropItem && !item.hidden" :data-element="item.dataElement" class="drop-item">
          <CustomButton :item="item" />
        </div>
      </template>
    </div>
  </n-popover>
</template>

<script setup>
  import { computed, ref, watch } from 'vue'
  import { NPopover } from 'naive-ui'
  import core from '@/core'
  import { useViewerStore } from '@/stores/modules/viewer'
  import { isMobileDevice } from '@/helpers/device'
  
  const prop = defineProps(['rightItems'])
  const useViewer = useViewerStore()
  
  const popover = ref(null)
  
  const { download, webViewerNamedAction, flattenPdfDownload } = core

  const popoverChanged = computed(() => useViewer.getPopoverChanged)
  const showDropdown = computed(() => popover.value && popover.value.getMergedShow())
  const load = computed(() => useViewer.getUpload)
  const themeMode = computed(() => useViewer.getThemeMode)
  const isNoItems = computed(() => {
    const dropDownItems = ['downloadButton', 'flattenButton', 'printButton', 'settingButton']
    isMobileDevice && dropDownItems.push('themeMode', 'pageModeButton')
    return prop.rightItems.filter((item) => dropDownItems.includes(item.type) || (item.name === 'customButton' && item.dropItem)).every(item => item.hidden)
  })

  watch(() => popoverChanged.value, (newValue, oldValue) => {
    if (newValue) {
      popover.value.setShow(false)
      useViewer.setPopoverChanged(false)
    }
  })

  watch(themeMode, () => {
    if (!isMobileDevice) return
    const $html = document.documentElement
    $html.classList.toggle('dark')
  })

  const downloadFile = async () => {
    popover.value.setShow(false)
    useViewer.setDownloading(true)
    try {
      const res = await download()
      useViewer.setDownloading(false)
      if (!res) {
        useViewer.setDownloadError('Downloaded')
      }
    } catch (error) {
      console.log(error)
    }
  }

  const handleFlatten = async () => {
    popover.value.setShow(false)
    useViewer.setDownloading(true)
    try {
      const res = await flattenPdfDownload()
      useViewer.setDownloading(false)
      if (!res) {
        useViewer.setDownloadError('Downloaded')
      }
    } catch (error) {
      console.log(error)
    }
  }

  const handlePrint = async() => {
    popover.value.setShow(false)
    useViewer.setDownloading(true)
    try {
      const res = await webViewerNamedAction('Print')
      useViewer.setDownloading(false)
      if (!res) {
        useViewer.setDownloadError('Print')
      }
    } catch (error) {
      console.log(error)
    }
  }

  const handleSettings = () => {
    popover.value.setShow(false)
    useViewer.setPopoverChanged(false)
    useViewer.openElement('settingsDialog')
  }

  const handleThemeMode = (mode) => {
    popover.value.setShow(false)
    if (mode === themeMode.value) return
    useViewer.setThemeMode(mode)
  }

  const changePageViewStatus = () => {
    popover.value.setShow(false)
    if (useViewer.isElementOpen('pageModePanel')) {
      useViewer.closeElement('pageModePanel')
    } else {
      useViewer.openElement('pageModePanel')
      
      useViewer.closeElement('contentEditorPanel')
    }
  }
</script>

<style scoped lang="scss">
.more {
  margin-right: 0 !important;

  svg:last-child {
    margin-left: 5px;
  }
}
</style>
<style>
.drop-item .custom-button {
  width: 100%;
  justify-content: flex-start;
}
</style>