import Line from './line.js'
import Shape from './shape.js'
import Ink from './ink.js'
import Freetext from './freetext.js'
import Text from './text.js'
import Stamp from './stamp.js'
import PaintFreetext from './paint/freetext'
import PaintShape from './paint/shape'
import PaintText from './paint/text'
import TextField from '../form/text_field.js'
import AddTextField from '../form/add_text_field.js'
import CheckBox from '../form/check_box.js'
import AddCheckBox from '../form/add_check_box.js'
import RadioButton from '../form/radio_button.js'
import AddRadioButton from '../form/add_radio_button.js'
import PushButton from '../form/push_button.js'
import AddPushButton from '../form/add_push_button.js'
import ListBox from '../form/list_box.js'
import AddListBox from '../form/add_list_box.js'
import ComboBox from '../form/combo_box.js'
import AddComboBox from '../form/add_combo_box.js'
import MarkupTextAnnotation from '../markup/text_annotation.js'
import PaintLink from './paint/link'
import Link from './link.js'
import AddSignatureFields from '../form/add_signature_fields.js'
import SignatureFields from '../form/signature_fields.js'

// 注释的画布层
class ComPDFAnnotationLayer {
  constructor({
    annotationStore,
    pageViewer,
    messageHandler,
    pageDiv,
    pdfPage,
    annotations = null,
    annotationsAll,
    viewport,
    scale,
    pageIndex,
    eventBus,
    $t
  }) {
    this._cancelled = false;
    this.pageViewer = pageViewer
    this.pageDiv = pageDiv;
    this.pdfPage = pdfPage;
    this.messageHandler = messageHandler
    this.annotations = annotations || [];
    this.annotationsAll = annotationsAll;
    this.viewport = viewport
    this.annotationsArray = []
    this.scale = scale
    this.eventBus = eventBus
    this.page = pageIndex
    this.tool = pageViewer.tool || ''
    this.color = pageViewer.color || ''
    this.annotateManager = null
    this.isDraging = false
    this.selectedElementName = null
    this.addMode = false
    this.toolMode = pageViewer.toolMode || ''

    this.annotationStore = annotationStore

    this.onHandleTool = this.handleTool.bind(this)
    this.onHandleToolMode = this.handleToolMode.bind(this)
    this.onHandlePropertyPanelChanged = this.handlePropertyPanelChanged.bind(this)
    this.onHandleAddSign = this.addSign.bind(this)

    this.annotationStore.$t = $t
  }

  // 处理注释工具切换
  handleTool({
    tool,
    color
  }) {
    this.tool = tool
    this.color = color
    this.pageViewer.tool = tool
    this.pageViewer.color = color

    if (!this.svgElement) {
      this.destroy()
      this.renderPaintScene()
    }

    const markup = ['highlight', 'underline', 'squiggly', 'strikeout']
    if (!tool || markup.includes(tool)) {
      document.querySelector('.document').classList.remove('annotation-edit')
    }
    if (markup.includes(tool) || tool === 'cropPage') {
      if (this.freetextManager) {
        this.freetextManager.reset()
      }
      if (this.textManager) {
        this.textManager.reset()
      }
      if (this.textFieldManager) {
        this.textFieldManager.reset()
      }
      if (this.checkBoxManager) {
        this.checkBoxManager.reset()
      }
      if (this.radioButtonManager) {
        this.radioButtonManager.reset()
      }
      if (this.pushButtonManager) {
        this.pushButtonManager.reset()
      }
      if (this.listBoxManager) {
        this.listBoxManager.reset()
      }
      if (this.comboBoxManager) {
        this.comboBoxManager.reset()
      }
      if (this.annotateManager) {
        this.annotateManager.reset()
      }
      if (this.linkManager) {
        this.linkManager.reset()
      }
      if (this.signFieldManager) {
        this.signFieldManager.reset()
      }
    }
    const shapes = ['line', 'arrow', 'circle', 'square', 'ink']
    if (markup.includes(tool) && color) {
      this.svgElement.classList.add('point-none')
    }
    if (this.annotateManager) {
      this.annotateManager.tool = tool
      this.annotateManager.color = color
    }
    if (this.freetextManager) {
      this.freetextManager.tool = tool
      this.freetextManager.color = color
    }
    if (this.textManager) {
      this.textManager.tool = tool
      this.textManager.color = color
    }
    if (this.textFieldManager) {
      this.textFieldManager.tool = tool
      this.textFieldManager.color = color
    }
    if (this.checkBoxManager) {
      this.checkBoxManager.tool = tool
      this.checkBoxManager.color = color
    }
    if (this.radioButtonManager) {
      this.radioButtonManager.tool = tool
      this.radioButtonManager.color = color
    }
    if (this.pushButtonManager) {
      this.pushButtonManager.tool = tool
      this.pushButtonManager.color = color
    }
    if (this.listBoxManager) {
      this.listBoxManager.tool = tool
      this.listBoxManager.color = color
    }
    if (this.comboBoxManager) {
      this.comboBoxManager.tool = tool
      this.comboBoxManager.color = color
    }
    if (this.linkManager) {
      this.linkManager.tool = tool
      this.linkManager.color = color
    }
    if (this.signFieldManager) {
      this.signFieldManager.tool = tool
      this.signFieldManager.color = color
    }
    if (shapes.includes(tool) && color) {
      document.querySelector('.document').classList.add('annotation-edit')
      if (this.freetextManager) {
        this.freetextManager.reset()
      }
      if (this.textManager) {
        this.textManager.reset()
      }
      if (this.textFieldManager) {
        this.textFieldManager.reset()
      }
      if (this.checkBoxManager) {
        this.checkBoxManager.reset()
      }
      if (this.radioButtonManager) {
        this.radioButtonManager.reset()
      }
      if (this.pushButtonManager) {
        this.pushButtonManager.reset()
      }
      if (this.listBoxManager) {
        this.listBoxManager.reset()
      }
      if (this.comboBoxManager) {
        this.comboBoxManager.reset()
      }
      if (this.linkManager) {
        this.linkManager.reset()
      }
      if (this.signFieldManager) {
        this.signFieldManager.reset()
      }
      if (this.annotateManager) {
        this.annotateManager.init()
        return
      }
      this.annotateManager = new PaintShape({
        tool,
        color,
        container: this.pageDiv,
        svgElement: this.svgElement,
        layer: this,
        viewport: this.viewport,
        scale: this.scale,
        page: this.page,
        eventBus: this.eventBus,
        selectedElementName: this.selectedElementName
      })
    } else if (tool === 'freetext') {
      document.querySelector('.document').classList.add('annotation-edit')
      if (this.annotateManager) {
        this.annotateManager.reset()
      }
      if (this.textManager) {
        this.textManager.reset()
      }
      if (this.textFieldManager) {
        this.textFieldManager.reset()
      }
      if (this.checkBoxManager) {
        this.checkBoxManager.reset()
      }
      if (this.radioButtonManager) {
        this.radioButtonManager.reset()
      }
      if (this.pushButtonManager) {
        this.pushButtonManager.reset()
      }
      if (this.listBoxManager) {
        this.listBoxManager.reset()
      }
      if (this.comboBoxManager) {
        this.comboBoxManager.reset()
      }
      if (this.linkManager) {
        this.linkManager.reset()
      }
      if (this.signFieldManager) {
        this.signFieldManager.reset()
      }
      if (this.freetextManager) {
        this.freetextManager.init()
        return
      }
      this.freetextManager = new PaintFreetext({
        tool,
        color,
        container: this.pageDiv,
        svgElement: this.svgElement,
        layer: this,
        viewport: this.viewport,
        scale: this.scale,
        page: this.page,
        eventBus: this.eventBus,
        selectedElementName: this.selectedElementName
      })
    } else if (tool === 'text') {
      document.querySelector('.document').classList.add('annotation-edit')
      if (this.annotateManager) {
        this.annotateManager.reset()
      }
      if (this.freetextManager) {
        this.freetextManager.reset()
      }
      if (this.textFieldManager) {
        this.textFieldManager.reset()
      }
      if (this.checkBoxManager) {
        this.checkBoxManager.reset()
      }
      if (this.radioButtonManager) {
        this.radioButtonManager.reset()
      }
      if (this.pushButtonManager) {
        this.pushButtonManager.reset()
      }
      if (this.listBoxManager) {
        this.listBoxManager.reset()
      }
      if (this.comboBoxManager) {
        this.comboBoxManager.reset()
      }
      if (this.linkManager) {
        this.linkManager.reset()
      }
      if (this.signFieldManager) {
        this.signFieldManager.reset()
      }
      if (this.textManager) {
        this.textManager.init()
        return
      }
      this.textManager = new PaintText({
        tool,
        color,
        container: this.pageDiv,
        svgElement: this.svgElement,
        layer: this,
        viewport: this.viewport,
        scale: this.scale,
        page: this.page,
        eventBus: this.eventBus,
        selectedElementName: this.selectedElementName
      })
    } else if (tool === 'textfield') {
      document.querySelector('.document').classList.add('annotation-edit')
      if (this.annotateManager) {
        this.annotateManager.reset()
      }
      if (this.freetextManager) {
        this.freetextManager.reset()
      }
      if (this.textManager) {
        this.textManager.reset()
      }
      if (this.checkBoxManager) {
        this.checkBoxManager.reset()
      }
      if (this.radioButtonManager) {
        this.radioButtonManager.reset()
      }
      if (this.pushButtonManager) {
        this.pushButtonManager.reset()
      }
      if (this.listBoxManager) {
        this.listBoxManager.reset()
      }
      if (this.comboBoxManager) {
        this.comboBoxManager.reset()
      }
      if (this.linkManager) {
        this.linkManager.reset()
      }
      if (this.signFieldManager) {
        this.signFieldManager.reset()
      }
      if (this.textFieldManager) {
        this.textFieldManager.init()
        return
      }
      this.textFieldManager = new AddTextField({
        tool,
        color,
        container: this.pageDiv,
        svgElement: this.svgElement,
        layer: this,
        viewport: this.viewport,
        scale: this.scale,
        page: this.page,
        eventBus: this.eventBus,
        selectedElementName: this.selectedElementName
      })
    } else if (tool === 'checkbox') {
      document.querySelector('.document').classList.add('annotation-edit')
      if (this.annotateManager) {
        this.annotateManager.reset()
      }
      if (this.freetextManager) {
        this.freetextManager.reset()
      }
      if (this.textManager) {
        this.textManager.reset()
      }
      if (this.textFieldManager) {
        this.textFieldManager.reset()
      }
      if (this.radioButtonManager) {
        this.radioButtonManager.reset()
      }
      if (this.pushButtonManager) {
        this.pushButtonManager.reset()
      }
      if (this.listBoxManager) {
        this.listBoxManager.reset()
      }
      if (this.comboBoxManager) {
        this.comboBoxManager.reset()
      }
      if (this.linkManager) {
        this.linkManager.reset()
      }
      if (this.signFieldManager) {
        this.signFieldManager.reset()
      }
      if (this.checkBoxManager) {
        this.checkBoxManager.init()
        return
      }
      this.checkBoxManager = new AddCheckBox({
        tool,
        color,
        container: this.pageDiv,
        svgElement: this.svgElement,
        layer: this,
        viewport: this.viewport,
        scale: this.scale,
        page: this.page,
        eventBus: this.eventBus,
        selectedElementName: this.selectedElementName
      })
    } else if (tool === 'radiobutton') {
      document.querySelector('.document').classList.add('annotation-edit')
      if (this.annotateManager) {
        this.annotateManager.reset()
      }
      if (this.freetextManager) {
        this.freetextManager.reset()
      }
      if (this.textManager) {
        this.textManager.reset()
      }
      if (this.textFieldManager) {
        this.textFieldManager.reset()
      }
      if (this.checkBoxManager) {
        this.checkBoxManager.reset()
      }
      if (this.pushButtonManager) {
        this.pushButtonManager.reset()
      }
      if (this.listBoxManager) {
        this.listBoxManager.reset()
      }
      if (this.comboBoxManager) {
        this.comboBoxManager.reset()
      }
      if (this.linkManager) {
        this.linkManager.reset()
      }
      if (this.signFieldManager) {
        this.signFieldManager.reset()
      }
      if (this.radioButtonManager) {
        this.radioButtonManager.init()
        return
      }
      this.radioButtonManager = new AddRadioButton({
        tool,
        color,
        container: this.pageDiv,
        svgElement: this.svgElement,
        layer: this,
        viewport: this.viewport,
        scale: this.scale,
        page: this.page,
        eventBus: this.eventBus,
        selectedElementName: this.selectedElementName
      })
    } else if (tool === 'pushbutton') {
      document.querySelector('.document').classList.add('annotation-edit')
      if (this.annotateManager) {
        this.annotateManager.reset()
      }
      if (this.freetextManager) {
        this.freetextManager.reset()
      }
      if (this.textManager) {
        this.textManager.reset()
      }
      if (this.textFieldManager) {
        this.textFieldManager.reset()
      }
      if (this.checkBoxManager) {
        this.checkBoxManager.reset()
      }
      if (this.radioButtonManager) {
        this.radioButtonManager.reset()
      }
      if (this.listBoxManager) {
        this.listBoxManager.reset()
      }
      if (this.comboBoxManager) {
        this.comboBoxManager.reset()
      }
      if (this.linkManager) {
        this.linkManager.reset()
      }
      if (this.signFieldManager) {
        this.signFieldManager.reset()
      }
      if (this.pushButtonManager) {
        this.pushButtonManager.init()
        return
      }
      this.pushButtonManager = new AddPushButton({
        tool,
        color,
        container: this.pageDiv,
        svgElement: this.svgElement,
        layer: this,
        viewport: this.viewport,
        scale: this.scale,
        page: this.page,
        eventBus: this.eventBus,
        selectedElementName: this.selectedElementName
      })
    } else if (tool === 'combobox') {
      document.querySelector('.document').classList.add('annotation-edit')
      if (this.annotateManager) {
        this.annotateManager.reset()
      }
      if (this.freetextManager) {
        this.freetextManager.reset()
      }
      if (this.textManager) {
        this.textManager.reset()
      }
      if (this.textFieldManager) {
        this.textFieldManager.reset()
      }
      if (this.checkBoxManager) {
        this.checkBoxManager.reset()
      }
      if (this.radioButtonManager) {
        this.radioButtonManager.reset()
      }
      if (this.pushButtonManager) {
        this.pushButtonManager.reset()
      }
      if (this.listBoxManager) {
        this.listBoxManager.reset()
      }
      if (this.linkManager) {
        this.linkManager.reset()
      }
      if (this.signFieldManager) {
        this.signFieldManager.reset()
      }
      if (this.comboBoxManager) {
        this.comboBoxManager.init()
        return
      }
      this.comboBoxManager = new AddComboBox({
        tool,
        color,
        container: this.pageDiv,
        svgElement: this.svgElement,
        layer: this,
        viewport: this.viewport,
        scale: this.scale,
        page: this.page,
        eventBus: this.eventBus,
        selectedElementName: this.selectedElementName
      })
    } else if (tool === 'listbox') {
      document.querySelector('.document').classList.add('annotation-edit')
      if (this.annotateManager) {
        this.annotateManager.reset()
      }
      if (this.freetextManager) {
        this.freetextManager.reset()
      }
      if (this.textManager) {
        this.textManager.reset()
      }
      if (this.textFieldManager) {
        this.textFieldManager.reset()
      }
      if (this.checkBoxManager) {
        this.checkBoxManager.reset()
      }
      if (this.radioButtonManager) {
        this.radioButtonManager.reset()
      }
      if (this.pushButtonManager) {
        this.pushButtonManager.reset()
      }
      if (this.comboBoxManager) {
        this.comboBoxManager.reset()
      }
      if (this.linkManager) {
        this.linkManager.reset()
      }
      if (this.signFieldManager) {
        this.signFieldManager.reset()
      }
      if (this.listBoxManager) {
        this.listBoxManager.init()
        return
      }
      this.listBoxManager = new AddListBox({
        tool,
        color,
        container: this.pageDiv,
        svgElement: this.svgElement,
        layer: this,
        viewport: this.viewport,
        scale: this.scale,
        page: this.page,
        eventBus: this.eventBus,
        selectedElementName: this.selectedElementName
      })
    } else if (tool === 'stamp') {
      if (this.annotateManager) {
        this.annotateManager.reset()
      }
      if (this.freetextManager) {
        this.freetextManager.reset()
      }
      if (this.textManager) {
        this.textManager.reset()
      }
      if (this.textFieldManager) {
        this.textFieldManager.reset()
      }
      if (this.checkBoxManager) {
        this.checkBoxManager.reset()
      }
      if (this.radioButtonManager) {
        this.radioButtonManager.reset()
      }
      if (this.pushButtonManager) {
        this.pushButtonManager.reset()
      }
      if (this.comboBoxManager) {
        this.comboBoxManager.reset()
      }
      if (this.listBoxManager) {
        this.listBoxManager.reset()
      }
      if (this.linkManager) {
        this.linkManager.reset()
      }
      if (this.signFieldManager) {
        this.signFieldManager.reset()
      }
    } else if (tool === 'link') {
      document.querySelector('.document').classList.add('annotation-edit')
      if (this.annotateManager) {
        this.annotateManager.reset()
      }
      if (this.freetextManager) {
        this.freetextManager.reset()
      }
      if (this.textManager) {
        this.textManager.reset()
      }
      if (this.textFieldManager) {
        this.textFieldManager.reset()
      }
      if (this.checkBoxManager) {
        this.checkBoxManager.reset()
      }
      if (this.radioButtonManager) {
        this.radioButtonManager.reset()
      }
      if (this.pushButtonManager) {
        this.pushButtonManager.reset()
      }
      if (this.comboBoxManager) {
        this.comboBoxManager.reset()
      }
      if (this.listBoxManager) {
        this.listBoxManager.reset()
      }
      if (this.signFieldManager) {
        this.signFieldManager.reset()
      }
      if (this.linkManager) {
        this.linkManager.init()
        return
      }
      this.linkManager = new PaintLink({
        tool,
        color,
        container: this.pageDiv,
        svgElement: this.svgElement,
        layer: this,
        viewport: this.viewport,
        scale: this.scale,
        page: this.page,
        eventBus: this.eventBus,
        selectedElementName: this.selectedElementName
      })
    } else if (tool === 'signatureFields') {
      document.querySelector('.document').classList.add('annotation-edit')
      if (this.annotateManager) {
        this.annotateManager.reset()
      }
      if (this.freetextManager) {
        this.freetextManager.reset()
      }
      if (this.textManager) {
        this.textManager.reset()
      }
      if (this.textFieldManager) {
        this.textFieldManager.reset()
      }
      if (this.checkBoxManager) {
        this.checkBoxManager.reset()
      }
      if (this.radioButtonManager) {
        this.radioButtonManager.reset()
      }
      if (this.pushButtonManager) {
        this.pushButtonManager.reset()
      }
      if (this.comboBoxManager) {
        this.comboBoxManager.reset()
      }
      if (this.listBoxManager) {
        this.listBoxManager.reset()
      }
      if (this.linkManager) {
        this.linkManager.reset()
      }
      if (this.signFieldManager) {
        this.signFieldManager.init()
        return
      }
      this.signFieldManager = new AddSignatureFields({
        tool,
        color,
        container: this.pageDiv,
        svgElement: this.svgElement,
        layer: this,
        viewport: this.viewport,
        scale: this.scale,
        page: this.page,
        eventBus: this.eventBus,
        selectedElementName: this.selectedElementName
      })
    }
  }

  // 渲染注释
  render(viewport) {
    if (this._cancelled) {
      return;
    }
    this.renderPaintScene()
    this.eventBus._on('toolChanged', this.onHandleTool)
    this.eventBus._on('toolModeChanged', this.onHandleToolMode)
    this.eventBus._on('setDefaultSelect', this.onHandleDefaultSelect)
    this.eventBus._on('propertyPanelChanged', this.onHandlePropertyPanelChanged)

    if (viewport) {
      const clonedViewport = viewport.clone({ dontFlip: true });
      this.viewport = clonedViewport;
      this.scale = clonedViewport.scale

      if (this.annotateManager) {
        this.annotateManager.viewport = clonedViewport
      }
      if (this.freetextManager) {
        this.freetextManager.viewport = clonedViewport
      }
      if (this.textManager) {
        this.textManager.viewport = clonedViewport
      }
      if (this.textFieldManager) {
        this.textFieldManager.viewport = clonedViewport
      }
      if (this.checkBoxManager) {
        this.checkBoxManager.viewport = clonedViewport
      }
      if (this.radioButtonManager) {
        this.radioButtonManager.viewport = clonedViewport
      }
      if (this.pushButtonManager) {
        this.pushButtonManager.viewport = clonedViewport
      }
      if (this.listBoxManager) {
        this.listBoxManager.viewport = clonedViewport
      }
      if (this.comboBoxManager) {
        this.comboBoxManager.viewport = clonedViewport
      }
      if (this.linkManager) {
        this.linkManager.viewport = clonedViewport
      }
      if (this.signFieldManager) {
        this.signFieldManager.viewport = clonedViewport
      }
    }
    if (!this.div) {
      this.renderContainer()
    }
    if (this.annotations && this.annotations.length) {
      for (let i = 0; i < this.annotations.length; i++) {
        const annotation = this.annotations[i]
        if (!annotation) continue
        const markupType = ['highlight', 'underline', 'squiggly', 'strikeout']
        if (markupType.includes(annotation.type)) {
          const markup = new MarkupTextAnnotation({
            container: this.div,
            annotation,
            page: this.page,
            viewport: this.viewport,
            scale: this.scale,
            eventBus: this.eventBus,
            layer: this
          })
          this.annotationsArray.push(markup)
        } else if (annotation.type === 'line' && !annotation.isDelete) {
          let supportLine = true
          if (annotation.tail || annotation.head) {
            const noneLine = ['None', 'Unknown']
            if (noneLine.includes(annotation.tail) && noneLine.includes(annotation.head)) {
              supportLine = true
            } else {
              if (annotation.head && annotation.head !== 'OpenArrow' && annotation.head !== 'None') {
                supportLine = false
              }

              if (annotation.tail && annotation.tail !== 'OpenArrow' && annotation.tail !== 'None') {
                supportLine = false
              }
            }
          }
          if(supportLine) {
            const line = new Line({
              container: this.div,
              annotation,
              page: this.page,
              viewport: this.viewport,
              scale: this.scale,
              eventBus: this.eventBus,
              layer: this
            })
            this.annotationsArray.push(line)
          }
          
        } else if ((annotation.type === 'square' || annotation.type === 'circle') && !annotation.isDelete) {
          const shape = new Shape({
            container: this.div,
            annotation,
            page: this.page,
            viewport: this.viewport,
            scale: this.scale,
            eventBus: this.eventBus,
            layer: this
          })
          this.annotationsArray.push(shape)
        } else if (annotation.type === 'ink' && !annotation.isDelete) {
          const ink = new Ink({
            container: this.div,
            annotation,
            page: this.page,
            viewport: this.viewport,
            scale: this.scale,
            eventBus: this.eventBus,
            layer: this
          })
          this.annotationsArray.push(ink)
        } else if (annotation.type === 'freetext' && !annotation.isDelete) {
          const freetext = new Freetext({
            container: this.div,
            annotation,
            page: this.page,
            viewport: this.viewport,
            scale: this.scale,
            eventBus: this.eventBus,
            layer: this
          })
          this.annotationsArray.push(freetext)
        }
        if (annotation.type === 'text' && !annotation.isDelete) {
          const text = new Text({
            container: this.div,
            annotation,
            page: this.page,
            viewport: this.viewport,
            scale: this.scale,
            eventBus: this.eventBus,
            layer: this
          })
          this.annotationsArray.push(text)
        }
        if ((annotation.type === 'stamp' || annotation.type === 'image') && !annotation.isDelete) {
          const text = new Stamp({
            container: this.div,
            annotation,
            messageHandler: this.messageHandler,
            page: this.page,
            viewport: this.viewport,
            scale: this.scale,
            eventBus: this.eventBus,
            layer: this
          })
          this.annotationsArray.push(text)
        }
        if (annotation.type?.replace('-', '') === 'textfield' && !annotation.isDelete) {
          const textfield = new TextField({
            container: this.div,
            annotation,
            page: this.page,
            viewport: this.viewport,
            scale: this.scale,
            eventBus: this.eventBus,
            layer: this,
            highlight: this.annotationStore.highlightForm
          })
          this.annotationsArray.push(textfield)
        }
        if (annotation.type?.replace('-', '') === 'checkbox' && !annotation.isDelete) {
          const checkbox = new CheckBox({
            container: this.div,
            annotation,
            page: this.page,
            viewport: this.viewport,
            scale: this.scale,
            eventBus: this.eventBus,
            layer: this,
            highlight: this.annotationStore.highlightForm
          })
          this.annotationsArray.push(checkbox)
        }
        if (annotation.type?.replace('-', '') === 'radiobutton' && !annotation.isDelete) {
          const radiobutton = new RadioButton({
            container: this.div,
            annotation,
            page: this.page,
            viewport: this.viewport,
            scale: this.scale,
            eventBus: this.eventBus,
            layer: this,
            highlight: this.annotationStore.highlightForm
          })
          this.annotationsArray.push(radiobutton)
        }
        if (annotation.type?.replace('-', '') === 'pushbutton' && !annotation.isDelete) {
          const pushbutton = new PushButton({
            container: this.div,
            annotation,
            page: this.page,
            viewport: this.viewport,
            scale: this.scale,
            eventBus: this.eventBus,
            layer: this,
            highlight: this.annotationStore.highlightForm
          })
          this.annotationsArray.push(pushbutton)
        }
        if (annotation.type?.replace('-', '') === 'listbox' && !annotation.isDelete) {
          const listbox = new ListBox({
            container: this.div,
            annotation,
            page: this.page,
            viewport: this.viewport,
            scale: this.scale,
            eventBus: this.eventBus,
            layer: this,
            highlight: this.annotationStore.highlightForm
          })
          this.annotationsArray.push(listbox)
        }
        if (annotation.type?.replace('-', '') === 'combobox' && !annotation.isDelete) {
          const combobox = new ComboBox({
            container: this.div,
            annotation,
            page: this.page,
            viewport: this.viewport,
            scale: this.scale,
            eventBus: this.eventBus,
            layer: this,
            highlight: this.annotationStore.highlightForm
          })
          this.annotationsArray.push(combobox)
        }
        if (annotation.type?.replace('-', '') === 'link' && !annotation.isDelete) {
          const link = new Link({
            container: this.div,
            annotation,
            page: this.page,
            viewport: this.viewport,
            scale: this.scale,
            eventBus: this.eventBus,
            layer: this,
            highlight: this.annotationStore.highlightLink
          })
          this.annotationsArray.push(link)
        }
        if (annotation.type === 'signatureFields' && !annotation.isDelete) {
          const signatureFields = new SignatureFields({
            container: this.div,
            annotation,
            page: this.page,
            viewport: this.viewport,
            scale: this.scale,
            eventBus: this.eventBus,
            layer: this,
            messageHandler: this.messageHandler
          })
          this.annotationsArray.push(signatureFields)
        }
      }
    }

    if (this.tool && this.color) {
      this.handleTool({
        tool: this.tool,
        color: this.color
      })
    }

    this.annotationStore.toSelectAnnotationName && this.pageViewer.selectAnnotation(this.annotationStore.toSelectAnnotationName)
  }

  renderContainer() {
    const div = document.createElement("div")
    div.className = "annotationContainer"
    div.tabIndex = 0
    this.pageDiv.append(div)
    this.div = div
  }

  emptyAnnotations() {
    const length = this.annotationsArray.length
    for (let i = 0; i < length; i++) {
      this.annotationsArray[i].handleDelete()
    }

    this.annotationsArray = []
  }

  // 取消渲染
  cancel() {
    this._cancelled = true;
    this.destroy();
  }

  // 画布重置
  destroy () {
    if (!this.svgElement) {
      this.svgElement = this.pageDiv.querySelector('.annotationLayer svg')
    }
    this.svgElement?.remove()
    this.svgElement = null
    if (!this.div) {
      this.div = this.pageDiv.querySelector('.annotationContainer')
    }
    this.div?.remove()
    this.div = null
    if (this.freetextManager) {
      this.freetextManager.reset()
    }
    if (this.textManager) {
      this.textManager.reset()
    }
    if (this.textFieldManager) {
      this.textFieldManager.reset()
    }
    if (this.checkBoxManager) {
      this.checkBoxManager.reset()
    }
    if (this.radioButtonManager) {
      this.radioButtonManager.reset()
    }
    if (this.pushButtonManager) {
      this.pushButtonManager.reset()
    }
    if (this.listBoxManager) {
      this.listBoxManager.reset()
    }
    if (this.comboBoxManager) {
      this.comboBoxManager.reset()
    }
    if (this.annotateManager) {
      this.annotateManager.reset()
    }
    if (this.linkManager) {
      this.linkManager.reset()
    }
    if (this.signFieldManager) {
      this.signFieldManager.reset()
    }
    this.eventBus._off('toolChanged', this.onHandleTool)
    this.eventBus._off('toolModeChanged', this.onHandleToolMode)
    this.eventBus._off('setDefaultSelect', this.onHandleDefaultSelect)
    this.eventBus._off('propertyPanelChanged', this.onHandlePropertyPanelChanged)

    this.annotationStore.notFirstRender = true
  }

  // 缩放或旋转重新设置画布css
  setSceneDimensions (viewport) {

    if (viewport) {
      const clonedViewport = viewport.clone({ dontFlip: true });
      this.viewport = clonedViewport
      if (this.annotateManager) {
        this.annotateManager.viewport = clonedViewport
      }
    }
    if (this.svgElement) {
      const viewport = this.viewport
      const scene = this.scene
      scene.style.width = viewport.width + 'px'
      scene.style.height = viewport.height + 'px'

      this.svgElement.setAttribute("viewBox", `0 0 ${viewport.width} ${viewport.height}`);
    }
  }

  // 渲染画布节点
  renderPaintScene() {
    if (!this.svgElement) {
      this.svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
      this.scene = this.pageDiv.querySelector('.annotationLayer')
      this.scene.append(this.svgElement)
    }
    this.setSceneDimensions()
  }

  // 渲染注释
  renderAnnotation (annotation, show) {
    if (!this.div) {
      this.renderContainer()
    }
    const markupType = ['highlight', 'underline', 'squiggly', 'strikeout']
    if (markupType.includes(annotation.type)) {
      const markup = new MarkupTextAnnotation({
        container: this.div,
        annotation,
        page: this.page,
        viewport: this.viewport,
        scale: this.scale,
        eventBus: this.eventBus,
        layer: this
      })
      this.annotationsArray.push(markup)
    } else if (annotation.type === 'line' || annotation.type === 'arrow') {
      const line = new Line({
        container: this.div,
        annotation,
        page: this.page,
        viewport: this.viewport,
        scale: this.scale,
        eventBus: this.eventBus,
        show: true,
        layer: this
      })
      this.annotationsArray.push(line)
    } else if (annotation.type === 'square' || annotation.type === 'circle') {
      const shape = new Shape({
        container: this.div,
        annotation,
        page: this.page,
        viewport: this.viewport,
        scale: this.scale,
        eventBus: this.eventBus,
        layer: this
      })
      this.annotationsArray.push(shape)
    } else if (annotation.type === 'ink' && !annotation.isDelete) {
      const ink = new Ink({
        container: this.div,
        annotation,
        page: this.page,
        viewport: this.viewport,
        scale: this.scale,
        eventBus: this.eventBus,
        layer: this
      })
      this.annotationsArray.push(ink)
    } else if (annotation.type === 'freetext' && !annotation.isDelete) {
      const freetext = new Freetext({
        container: this.div,
        annotation,
        page: this.page,
        viewport: this.viewport,
        scale: this.scale,
        eventBus: this.eventBus,
        layer: this,
        show
      })
      this.annotationsArray.push(freetext)
    } else if (annotation.type === 'text' && !annotation.isDelete) {
      const text = new Text({
        container: this.div,
        annotation,
        page: this.page,
        viewport: this.viewport,
        scale: this.scale,
        eventBus: this.eventBus,
        layer: this
      })
      this.annotationsArray.push(text)
    } else if ((annotation.type === 'stamp') && !annotation.isDelete) {
      const text = new Stamp({
        container: this.div,
        annotation,
        messageHandler: this.messageHandler,
        page: this.page,
        viewport: this.viewport,
        scale: this.scale,
        eventBus: this.eventBus,
        layer: this
      })
      this.annotationsArray.push(text)
    } else if (annotation.type === 'textfield' && !annotation.isDelete) {
      const textfield = new TextField({
        container: this.div,
        annotation,
        page: this.page,
        viewport: this.viewport,
        scale: this.scale,
        eventBus: this.eventBus,
        layer: this,
        highlight: this.highlightForm
      })
      this.annotationsArray.push(textfield)
    } else if (annotation.type === 'checkbox' && !annotation.isDelete) {
      const checkbox = new CheckBox({
        container: this.div,
        annotation,
        page: this.page,
        viewport: this.viewport,
        scale: this.scale,
        eventBus: this.eventBus,
        layer: this,
        highlight: this.annotationStore.highlightForm
      })
      this.annotationsArray.push(checkbox)
    } else if (annotation.type === 'radiobutton' && !annotation.isDelete) {
      const radiobutton = new RadioButton({
        container: this.div,
        annotation,
        page: this.page,
        viewport: this.viewport,
        scale: this.scale,
        eventBus: this.eventBus,
        layer: this,
        highlight: this.annotationStore.highlightForm
      })
      this.annotationsArray.push(radiobutton)
    } else if (annotation.type === 'pushbutton' && !annotation.isDelete) {
      const pushbutton = new PushButton({
        container: this.div,
        annotation,
        page: this.page,
        viewport: this.viewport,
        scale: this.scale,
        eventBus: this.eventBus,
        layer: this,
        show,
        highlight: this.annotationStore.highlightForm
      })
      this.annotationsArray.push(pushbutton)
    } else if (annotation.type === 'listbox' && !annotation.isDelete) {
      const listbox = new ListBox({
        container: this.div,
        annotation,
        page: this.page,
        viewport: this.viewport,
        scale: this.scale,
        eventBus: this.eventBus,
        layer: this,
        show,
        highlight: this.annotationStore.highlightForm
      })
      this.annotationsArray.push(listbox)
    } else if (annotation.type === 'combobox' && !annotation.isDelete) {
      const combobox = new ComboBox({
        container: this.div,
        annotation,
        page: this.page,
        viewport: this.viewport,
        scale: this.scale,
        eventBus: this.eventBus,
        layer: this,
        show,
        highlight: this.annotationStore.highlightForm
      })
      this.annotationsArray.push(combobox)
    } else if (annotation.type === 'link' && !annotation.isDelete) {
      const link = new Link({
        container: this.div,
        annotation,
        page: this.page,
        viewport: this.viewport,
        scale: this.scale,
        eventBus: this.eventBus,
        layer: this,
        show,
        highlight: this.annotationStore.highlightLink
      })
      this.annotationsArray.push(link)
    } else if (annotation.type === 'signatureFields' && !annotation.isDelete) {
      const signatureFields = new SignatureFields({
        container: this.div,
        annotation,
        page: this.page,
        viewport: this.viewport,
        scale: this.scale,
        eventBus: this.eventBus,
        layer: this,
        messageHandler: this.messageHandler
      })
      this.annotationsArray.push(signatureFields)
    }
  }

  // 处理 Form 切换
  handleToolMode (mode) {
    this.toolMode = mode
    this.pageViewer.toolMode = mode
    this.eventBus.dispatch('changeSelectAvailable')
  }

  // 处理面板属性修改
  handlePropertyPanelChanged (props) {
    if (this.annotations && this.annotations.length) {
      const annotation = this.annotations.find((element) => element.name === this.annotationStore.selectedElementName)
      if (annotation) {
        if (annotation.type?.replace('-', '') === 'textfield') {
          this.eventBus.dispatch("textfieldPropertyPanelChanged", props);
        } else if (annotation.type?.replace('-', '') === 'checkbox') {
          this.eventBus.dispatch("checkboxPropertyPanelChanged", props);
        } else if (annotation.type?.replace('-', '') === 'radiobutton') {
          this.eventBus.dispatch("radioButtonPropertyPanelChanged", props);
        } else if (annotation.type?.replace('-', '') === 'pushbutton') {
          this.eventBus.dispatch("pushButtonPropertyPanelChanged", props);
        } else if (annotation.type?.replace('-', '') === 'listbox') {
          this.eventBus.dispatch("listBoxPropertyPanelChanged", props);
        } else if (annotation.type?.replace('-', '') === 'combobox') {
          this.eventBus.dispatch("comboBoxPropertyPanelChanged", props);
        } else if (annotation.type === 'link') {
          this.eventBus.dispatch("linkPropertyPanelChanged", props);
        }
      }
    }
  }

  addSign (data) {
    const imgEle = document.getElementsByClassName('sign-ink-save')
    if (!imgEle.length) {
      this.pageDiv.removeEventListener('click', this.onHandleAddSign)
      return
    }
    const isEvent = data instanceof PointerEvent
    if (isEvent) {
      this.eventBus.dispatch('getSignData', {
        page: this.page,
        viewport: this.viewport,
        clickX: data.offsetX,
        clickY: data.offsetY
      })
    }
    if (data && data.page === this.page && data.annotationData && !isEvent) {
      this.renderAnnotation(data.annotationData)
    }
    this.pageDiv.removeEventListener('click', this.onHandleAddSign)
    this.eventBus.dispatch('initCursorStyle')
  }
}

export default ComPDFAnnotationLayer;
