import { defineStore } from 'pinia'
import core from '@/core'

export const useViewerStore = defineStore({
  id: 'viewer',
  state: () => ({
    language: 'en',
    fullMode: false,
    currentPage: 0,
    searchStatus: false,
    scale: '',
    oldScale: '',
    newScale: '',
    themeMode: 'Light',
    pageMode: 0,
    webviewerMode: 'Standalone',
    scrollMode: 'Vertical',
    pageLabels: [],
    zoomLevel: ['auto', 'page-fit', 0.5, 1, 1.25, 1.5, 2, 2.5],
    activeTab: 0,
    activeStickNote: false,
    activeActiveMeasure: false,
    activeHand: false,
    license: null,
    verified: false,
    activeElements: {
      leftPanel: false,
      rightPanel: false,
      pageModePanel: false,
      stampPanel: false,
      linkPanel: false,
      compareSettingDialog: false,
      settingsDialog: false,
      setPasswordModal: false,
      signCreatePanel: false,
      digitalSignCreatePanel: false,
      downloadSettingDialog: false,
      printSettingDialog: false,
      contentEditorPanel: false,
      contentEditorPreventDialog: false,
      docEditorPreventDialog: false,
      insertPageSettingDialog: false,
      deletePageDialog: false,
      extractPageSettingDialog: false,
      movePageSettingDialog: false,
      selectSignTypeDialog: false,
      signatureAppearanceDialog: false,
      signatureDetailsDialog: false,
      certificateViewerDialog: false,
      deleteSignatureDialog: false,
      addDigitalFileDialog: false,
    },
    digitalSignature: {
      preview: null,
    },
    activeElementsTab: {
      leftPanel: 'THUMBS',
      rightPanel: 'GENERAL',
      stampPanel: 'STANDARD',
      signPanel: 'keyboard'
    },
    disabledElements: {
      header: { disabled: false },
      pageNavOverlay: { disabled: false },
    },
    headers: [
      {
        type: 'toggleElementButton',
        img: 'icon-header-sidebar-line',
        element: 'leftPanel',
        dataElement: 'leftPanelButton',
        title: 'Left Panel',
        class: 'toggle-button'
      },
      {
        type: 'divider',
        hidden: [
          'small-mobile'
        ]
      },
      {
        type: 'pageDisplayButton',
        dataElement: 'pageDisplayButton',
        element: 'pageDisplayButton',
        title: 'Page Display'
      },
      {
        type: 'fullScreenButton',
        dataElement: 'fullScreenButton',
        element: 'fullScreenButton',
        title: 'Full Screen'
      },
      {
        type: 'handToolButton',
        dataElement: 'handToolButton',
        element: 'handToolButton',
        title: 'Pan Tool'
      },
      {
        type: 'cropPageButton',
        dataElement: 'cropPageButton',
        element: 'cropPageButton'
      },
      {
        type: 'divider',
        hidden: [
          'small-mobile'
        ]
      },
      {
        type: 'zoomOverlay',
        dataElement: 'zoomOverlayButton',
        element: 'zoomOverlay',
        hiddenOnMobileDevice: true
      },
      {
        type: 'divider',
        hidden: [
          'small-mobile'
        ]
      },
      {
        type: 'themeMode',
        dataElement: 'themeMode',
        element: 'themeMode'
      },
      {
        type: 'stickyNoteButton',
        dataElement: 'stickyNoteButton',
        element: 'stickyNoteButton'
      },
      {
        type: 'measureButton',
        dataElement: 'measureButton',
        element: 'measureButton',
        hidden: true,
      },
      {
        type: 'compareButton',
        dataElement: 'compareButton',
        element: 'compareButton',
        hidden: true,
      },
      {
        type: 'saveButton',
        dataElement: 'saveButton',
        element: 'saveButton',
        hidden: true,
      },
      {
        type: 'selectTools',
        dataElement: 'selectTools',
      },
      {
        type: 'openFileButton',
        dataElement: 'openFileButton',
        element: 'openFileButton',
        title: 'Open File'
      }
    ],
    rightHeaders: [
      {
        type: 'openFileButton',
        dataElement: 'openFileButton',
        element: 'openFileButton',
        title: 'Open File'
      },
      {
        type: 'searchButton',
        dataElement: 'searchButton',
        element: 'searchButton',
        title: 'Search'
      },
      {
        type: 'toggleRightPanelButton',
        img: 'icon-header-sidebar-line',
        element: 'rightPanel',
        dataElement: 'rightPanelButton',
        title: 'Right Panel',
        id: 'propertyPanelButton'
      },
      {
        type: 'pageModeButton',
        dataElement: 'pageModeButton',
        element: 'pageModeButton'
      },
      {
        type: 'downloadButton',
        dataElement: 'downloadButton',
        element: 'downloadButton',
        title: 'Download'
      },
      {
        type: 'flattenButton',
        dataElement: 'flattenButton',
        element: 'flattenButton',
        title: 'Save as Flattened PDF'
      },
      {
        type: 'printButton',
        dataElement: 'printButton',
        element: 'printButton',
        title: 'Print'
      },
      {
        type: 'themeMode',
        dataElement: 'themeMode',
        element: 'themeMode'
      },
      {
        type: 'settingButton',
        dataElement: 'settingButton',
        element: 'settingButton',
        title: 'Setting'
      }
    ],
    toolMode: 'view',
    tools: [
      {
        element: 'view',
        dataElement: 'toolMenu-View'
      },
      {
        element: 'annotation',
        dataElement: 'toolMenu-Annotation'
      },
      {
        element: 'form',
        dataElement: 'toolMenu-Form'
      },
      {
        element: 'sign',
        dataElement: 'toolMenu-Sign'
      },
      {
        element: 'security',
        dataElement: 'toolMenu-Security'
      },
      {
        element: 'compare',
        dataElement: 'toolMenu-Compare'
      },
      {
        element: 'editor',
        dataElement: 'toolMenu-Editor'
      },
      {
        element: 'document',
        dataElement: 'toolMenu-Document'
      }
    ],
    toolItems: {
      annotation: [
        {
          type: 'note',
          dataElement: 'note'
        },
        {
          type: 'ink',
          dataElement: 'ink'
        },
        {
          type: 'highlight',
          dataElement: 'highlight'
        },
        {
          type: 'underline',
          dataElement: 'underline'
        },
        {
          type: 'strikeout',
          dataElement: 'strikeout'
        },
        {
          type: 'squiggly',
          dataElement: 'squiggly'
        },
        {
          type: 'circle',
          dataElement: 'circle'
        },
        {
          type: 'square',
          dataElement: 'square'
        },
        {
          type: 'arrow',
          dataElement: 'arrow'
        },
        {
          type: 'line',
          dataElement: 'line'
        },
        {
          type: 'freetext',
          dataElement: 'freetext'
        },
        {
          type: 'stamp',
          dataElement: 'stamp'
        },
        {
          type: 'image',
          dataElement: 'image'
        },
        {
          type: 'link',
          dataElement: 'link'
        },
      ],
      form: [
        {
          type: 'textFieldButton',
          dataElement: 'textFieldButton',
          element: 'textFieldButton',
          title: 'Form Field'
        },
        {
          type: 'checkBoxButton',
          dataElement: 'checkBoxButton',
          element: 'checkBoxButton',
          title: 'Check Box'
        },
        {
          type: 'radioButton',
          dataElement: 'radioButton',
          element: 'radioButton',
          title: 'Radio Button'
        },
        {
          type: 'listBox',
          dataElement: 'listBox',
          element: 'listBox',
          title: 'List Box'
        },
        {
          type: 'comboBox',
          dataElement: 'comboBox',
          element: 'comboBox',
          title: 'Combo Box'
        },
        {
          type: 'pushButton',
          dataElement: 'pushButton',
          element: 'pushButton',
          title: 'Push Button'
        }
      ],
      security: [
        {
          type: 'securityToolbar',
          dataElement: 'securityToolbar',
          element: 'securityToolbar',
          title: 'Security'
        },
        {
          type: 'watermarkSelect',
          dataElement: 'watermarkSelect',
          element: 'watermarkSelect',
          title: 'Watermark'
        },
        {
          type: 'redaction',
          dataElement: 'redaction',
        },
        {
          type: 'remove',
          dataElement: 'remove',
        },
      ],
      compare: [
        {
          type: 'comparedToolbar'
        }
      ],
      editor: [
        {
          type: 'addText',
          dataElement: 'addText',
          element: 'addText',
          title: 'header.addText'
        },
        {
          type: 'addImage',
          dataElement: 'addImage',
          element: 'addImage',
          title: 'header.addImage'
        },
        {
          type: 'divider',
        },
        {
          type: 'undo',
          dataElement: 'undo',
          element: 'undo',
          title: 'header.undo'
        },
        {
          type: 'redo',
          dataElement: 'redo',
          element: 'redo',
          title: 'header.redo'
        }
      ],
      sign: [
        {
          type: 'signatureToolBar'
        }
      ]
    },
    customFonts: ['Helvetica', 'Courier', 'Times-Roman'],
    downloading: false,
    downloadError: '',
    popoverChanged: false,
    /*  '': 不在compare模式下
        'finished': 覆盖对比完成
        'end': 覆盖对比完成，关闭对比结果，回到初始对比页面
        'next': 内容对比完成 */
    compareStatus: '',
    upload: true, // 未上传文件的upload按钮
    uploadLoading: false, // 上传中的loading效果
    compareMode: 'content',
    contentEditorType: 'text',
    signatureVerify: 0, // 验证数字签名显示的横幅 0:不显示 1:有效 2:无效 3:未知
    selectedSignatureField: null,
    textPopup: [
      { type: 'copy', dataElement: 'copyTextButton' },
      { type: 'highlight', dataElement: 'highlightButton' },
      { type: 'underline', dataElement: 'underlineButton' },
      { type: 'strikeout', dataElement: 'strikeoutButton' },
      { type: 'squiggly', dataElement: 'squigglyButton' }
    ],
    cropPagePopup: [
      { type: 'cropPage', dataElement: 'cropDownloadButton' },
      { type: 'close', dataElement: 'exitCroppingButton' }
    ],
    contentEditorPopup: [
      { type: 'copy', dataElement: 'copyTextButton' },
      { type: 'delete', dataElement: 'deleteButton' },
      { type: 'property', dataElement: 'propertyButton' }
    ],
    isDisabledHeader: false,
    rightPanelButtonDisabled: true,
    redactionConfirmDialog: -1, // 0: exit, 1: apply
    commonLoading: false,
  }),
  getters: {
    getLanguage () {
      return this.language
    },
    getFullMode () {
      return this.fullMode
    },
    getCurrentPage () {
      return this.currentPage
    },
    getThemeMode () {
      return this.themeMode
    },
    getPageMode () {
      return this.pageMode
    },
    getScrollMode () {
      return this.scrollMode
    },
    getWebviewerMode () {
      return this.webviewerMode
    },
    getActiveHeaderItems () {
      return this.headers
    },
    getActiveRightHeaderItems () {
      return this.rightHeaders
    },
    isElementOpen: (state) => {
      return (dataElement) => state.activeElements[dataElement]
    },
    getActiveElementTab: (state) => {
      return (dataElement) => state.activeElementsTab[dataElement]
    },
    getScale () {
      return Math.round(this.scale * 100)
    },
    getOldScale () {
      return Math.round(this.oldScale * 100)
    },
    getNewScale () {
      return Math.round(this.newScale * 100)
    },
    getActiveStickNote () {
      return this.activeStickNote
    },
    getActiveMeasure () {
      return this.activeActiveMeasure
    },
    getActiveHand () {
      return this.activeHand
    },
    getSearchStatus () {
      return this.searchStatus
    },
    getToolMode () {
      return this.toolMode
    },
    getTools () {
      return this.tools
    },
    getToolItems () {
      return this.toolItems
    },
    getDownloading () {
      return this.downloading
    },
    getDownloadError () {
      return this.downloadError
    },
    getPopoverChanged () {
      return this.popoverChanged
    },
    getCompareStatus () {
      return this.compareStatus
    },
    getUpload () {
      return this.upload
    },
    getUploadLoading () {
      return this.uploadLoading
    },
    getCompareMode () {
      return this.compareMode
    },
    getLicense() {
      return this.license
    },
    getVerified () {
      return this.verified
    },
    getContentEditorType () {
      return this.contentEditorType
    },
    getSignatureVerify () {
      return this.signatureVerify
    },
    getSelectedSignatureField () {
      return this.selectedSignatureField
    },
    getDigitalSignaturePreview () {
      return this.digitalSignature.preview
    },
    getCertSubject () {
      return this.digitalSignature.certSubject
    },
    getPopupItems (state) {
      return (dataElement) => state[dataElement]
    },
    getDisabledHeader () {
      return this.isDisabledHeader
    },
    getDisabledElementsObj: (state) => {
      return state.disabledElements
    },
    getDisabledElements: (state) => {
      return (dataElement) => state.disabledElements[dataElement]?.disabled
    },
    getRightPanelButtonDisabled () {
      return this.rightPanelButtonDisabled
    },
    getCustomFonts () {
      return this.customFonts
    },
    getRedactionConfirmDialog () {
      return this.redactionConfirmDialog
    },
    getCommonLoading () {
      return this.commonLoading
    },
  },
  actions: {
    resetSetting () {
      this.fullMode = false
      this.currentPage = 0
      this.scale = ''
      this.themeMode = 'Light'
      this.pageMode = 0
      this.scrollMode = 'Vertical'
      this.activeTab = 0
      this.searchStatus = false
      this.activeElements = {
        leftPanel: false,
        rightPanel: false,
        pageModePanel: false,
        stampPanel: false,
        linkPanel: false,
        compareSettingDialog: false,
        settingsDialog: false,
        contentEditorPreventDialog: false,
        docEditorPreventDialog: false,
        setPasswordModal: false,
        signCreatePanel: false,
        digitalSignCreatePanel: false,
        downloadSettingDialog: false,
        printSettingDialog: false,
        contentEditorPanel: false,
        insertPageSettingDialog: false,
        deletePageDialog: false,
        extractPageSettingDialog: false,
        movePageSettingDialog: false,
        selectSignTypeDialog: false,
        signatureAppearanceDialog: false,
        signatureDetailsDialog: false,
        certificateViewerDialog: false,
        deleteSignatureDialog: false,
        addDigitalFileDialog: false
      }
      this.activeElementsTab = {
        leftPanel: 'THUMBS',
        rightPanel: 'GENERAL',
        stampPanel: 'STANDARD',
        signPanel: 'trackpad'
      }
      this.signatureVerify = 0
    },
    resetPanels () {
      this.activeElements.leftPanel && this.closeElement('leftPanel')
      this.searchStatus = false
      this.activeElements = {
        leftPanel: false,
        rightPanel: false,
        pageModePanel: false,
        stampPanel: false
      }
    },
    setLanguage (language) {
      this.language = language
    },
    setLicense(license) {
      this.license = license
    },
    setVierified (verified) {
      this.verified = verified
    },
    setFullMode (fullMode) {
      return this.fullMode = fullMode
    },
    setCurrentPage (currentPage) {
      this.currentPage = currentPage
    },
    setThemeMode (themeMode) {
      this.themeMode = themeMode
    },
    setPageMode (mode) {
      this.pageMode = mode
    },
    setScrollMode (mode) {
      this.scrollMode = mode
    },
    setWebviewerMode (mode) {
      this.webviewerMode = mode
    },
    setCurrentScale (scale) {
      this.scale = scale
    },
    setOldCurrentScale (scale) {
      this.oldScale = scale
    },
    setNewCurrentScale (scale) {
      this.newScale = scale
    },
    openElement (dataElement) {
      if(this.activeElements[dataElement]) return
      this.activeElements[dataElement] = true
      dataElement === 'leftPanel' && core.toggleSidebar()
    },
    closeElement (dataElement) {
      if(!this.activeElements[dataElement]) return
      this.activeElements[dataElement] = false
      dataElement === 'leftPanel' && core.toggleSidebar() && setTimeout(() => core.webViewerPageMode('none'), 0)
    },
    toggleElement (dataElement) {
      if (this.activeElements[dataElement]) {
        this.closeElement(dataElement)
      } else {
        this.openElement(dataElement)
      }
    },
    setActiveElementTab (dataElement, tab, mode) {
      this.activeElementsTab[dataElement] = tab

      const tabMap = {
        THUMBS: 'thumbs',
        OUTLINE: 'outline'
      }
      tabMap[tab] && setTimeout(() => core.webViewerPageMode(tabMap[tab]), 0)
    },
    toggleActiveStickNote () {
      this.activeStickNote = !this.activeStickNote
    },
    closeActiveStickNote () {
      this.activeStickNote = false
    },
    toggleActiveMeasure () {
      this.activeActiveMeasure = !this.activeActiveMeasure
    },
    closeActiveMeasure () {
      this.activeActiveMeasure = false
    },
    toggleActiveHand (value) {
      this.activeHand = value
    },
    closeActiveHand () {
      this.activeHand = false
    },
    setSearchStatus (value) {
      this.searchStatus = value
    },
    setActiveToolMode (mode) {
      this.toolMode = mode
      this.activeElements['stampPanel'] = false
      this.activeElements['linkPanel'] = false
      this.activeElements['contentEditorPanel'] = false
      core.setToolMode(mode)
    },
    setDownloading (boolean) {
      this.downloading = boolean
    },
    setDownloadError (text) {
      this.downloadError = text
    },
    setActiveSignWay (way) {
      this.activeElementsTab['signPanel'] = way
    },
    setPopoverChanged (bool) {
      this.popoverChanged = bool
    },
    setCompareStatus (string) {
      this.compareStatus = string
    },
    setUpload (bool) {
      this.upload = bool
    },
    setUploadLoading (bool) {
      this.uploadLoading = bool
    },
    setCompareMode (mode) {
      this.compareMode = mode
    },
    setContentEditorType (type) {
      this.contentEditorType = type
    },
    setSignatureVerify (bool) {
      this.signatureVerify = bool
    },
    setSelectedSignatureField(annotation) {
      this.selectedSignatureField = annotation
    },
    setDigitalSignaturePreview (preview) {
      this.digitalSignature.preview = preview
    },
    setCertSubject (subject) {
      this.digitalSignature.certSubject = subject
    },
    dispatch(action) { // api中使用
      return this[action];
    },
    getState(key) { // api中使用
      if (key) return this.$state[key];
      return this.$state;
    },
    setDisableHeader (value) {
      this.isDisabledHeader = value
    },
    setDisabledElements (dataElement) {
      const disabledElements = this.disabledElements
      if (dataElement in disabledElements) {
        disabledElements[dataElement].disabled = true
      } else {
        disabledElements[dataElement] = { disabled: true }
      }
    },
    setEnabledElements (dataElement) {
      const disabledElements = this.disabledElements
      if (dataElement in disabledElements) {
        disabledElements[dataElement].disabled = false
      } else {
        disabledElements[dataElement] = { disabled: false }
      }
    },
    setRightPanelButtonDisabled (value) {
      this.rightPanelButtonDisabled = value
    },
    setCustomFonts (fonts) {
      if (typeof fonts === 'string') {
        fonts = [fonts]
      }
      for (let i = 0; i < fonts.length; i++) {
        if (!this.customFonts.includes(fonts[i])) {
          this.customFonts.push(fonts[i])
        }
      }
    },
    setRedactionConfirmDialog (val) {
      this.redactionConfirmDialog = val
    },
    setCommonLoading (val) {
      this.commonLoading = Boolean(val)
    },
  }
})
