import eventBus from '@/utils/eventBus'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
import { copyStoreWithOut } from '@/store/modules/data-visualization/copy'
import { composeStoreWithOut } from '@/store/modules/data-visualization/compose'
import { lockStoreWithOut } from '@/store/modules/data-visualization/lock'
import { storeToRefs } from 'pinia'
import { getCurInfo } from '@/store/modules/data-visualization/common'
import { isGroupCanvas, isTabCanvas } from '@/utils/canvasUtils'
import { groupStyleRevert } from '@/utils/style'

const dvMainStore = dvMainStoreWithOut()
const composeStore = composeStoreWithOut()
const snapshotStore = snapshotStoreWithOut()
const copyStore = copyStoreWithOut()
const lockStore = lockStoreWithOut()
const { curComponent, editMode } = storeToRefs(dvMainStore)
const { areaData } = storeToRefs(composeStore)

const ctrlKey = 17,
  shiftKey = 16, // shift
  commandKey = 91, // mac command
  leftKey = 37, // 向左
  upKey = 38, // 向上
  rightKey = 39, // 向右
  downKey = 40, // 向下
  vKey = 86, // 粘贴
  cKey = 67, // 复制
  xKey = 88, // 剪切
  yKey = 89, // 重做
  zKey = 90, // 撤销
  gKey = 71, // 组合
  bKey = 66, // 拆分
  lKey = 76, // 锁定
  uKey = 85, // 解锁
  sKey = 83, // 保存
  pKey = 80, // 预览
  dKey = 68, // 删除
  deleteKey = 46, // 删除
  macDeleteKey = 8, // 删除
  eKey = 69, // 清空画布
  spaceKey = 32 // 空格键

export const keycodes = [8, 37, 38, 39, 40, 66, 67, 68, 69, 71, 76, 80, 83, 85, 86, 88, 89, 90]

// 与组件状态无关的操作
const basemap = {
  [vKey]: paste,
  [yKey]: redo,
  [zKey]: undo,
  [sKey]: save,
  [pKey]: preview,
  [eKey]: clearCanvas
}

// 当处于大屏状态时 按上下左右键 可以移动位置
const positionMoveKey = {
  [leftKey]: move,
  [upKey]: move,
  [rightKey]: move,
  [downKey]: move
}

// 组件锁定状态下可以执行的操作
const lockMap = {
  ...basemap,
  [uKey]: unlock
}

// 组件未锁定状态下可以执行的操作
const unlockMap = {
  ...basemap,
  [cKey]: copy,
  [xKey]: cut,
  [gKey]: compose,
  [bKey]: decompose,
  [dKey]: deleteComponent,
  [deleteKey]: deleteComponent,
  [lKey]: lock
}

// 检查当前页面是否有弹框
const checkDialog = () => {
  let haveDialog = false
  document.querySelectorAll('.ed-overlay').forEach(element => {
    if (window.getComputedStyle(element).getPropertyValue('display') != 'none') {
      haveDialog = true
    }
  })
  document.querySelectorAll('.ed-popper').forEach(element => {
    if (
      !element.classList?.contains('template-popper-tips') &&
      window.getComputedStyle(element).getPropertyValue('display') != 'none'
    ) {
      haveDialog = true
    }
  })
  // 富文本单框
  if (document.querySelector('.tox-dialog-wrap')) {
    haveDialog = true
  }

  return haveDialog
}

let isCtrlOrCommandDown = false
let isShiftDown = false
// 全局监听按键操作并执行相应命令
export function listenGlobalKeyDown() {
  window.onkeydown = e => {
    if (editMode.value === 'preview' || checkDialog()) return
    const { keyCode } = e
    if (positionMoveKey[keyCode] && curComponent.value) {
      positionMoveKey[keyCode](keyCode)
      e.preventDefault()
      e.stopPropagation()
    } else if (keyCode === shiftKey) {
      isShiftDown = true
      composeStore.setIsShiftDownStatus(true)
      releaseKeyCheck('shift')
    } else if (keyCode === ctrlKey || keyCode === commandKey) {
      isCtrlOrCommandDown = true
      composeStore.setIsCtrlOrCmdDownStatus(true)
      releaseKeyCheck('ctrl')
    } else if (keyCode === spaceKey) {
      composeStore.setSpaceDownStatus(true)
      e.preventDefault()
      e.stopPropagation()
    } else if ((keyCode == deleteKey || keyCode == macDeleteKey) && curComponent.value) {
      deleteComponent()
    } else if (isCtrlOrCommandDown) {
      if (unlockMap[keyCode] && (!curComponent.value || !curComponent.value.isLock)) {
        e.preventDefault()
        unlockMap[keyCode]()
      } else if (lockMap[keyCode] && curComponent.value && curComponent.value.isLock) {
        e.preventDefault()
        lockMap[keyCode]()
      }
    }
  }

  window.onkeyup = e => {
    if (e.keyCode === ctrlKey || e.keyCode === commandKey) {
      isCtrlOrCommandDown = false
      composeStore.setIsCtrlOrCmdDownStatus(false)
    } else if (e.keyCode === shiftKey) {
      isShiftDown = true
      composeStore.setIsShiftDownStatus(false)
    } else if (e.keyCode === spaceKey) {
      composeStore.setSpaceDownStatus(false)
      e.preventDefault()
      e.stopPropagation()
    }
  }

  window.onmousedown = () => {
    dvMainStore.setInEditorStatus(false)
  }
}

export function releaseAttachKey() {
  isCtrlOrCommandDown = false
  composeStore.setIsCtrlOrCmdDownStatus(false)
  isShiftDown = false
  composeStore.setIsShiftDownStatus(false)
}

//当前不支持同时ctrl + shift操作
function releaseKeyCheck(keyType) {
  if (keyType === 'shift' && isCtrlOrCommandDown) {
    isCtrlOrCommandDown = false
    composeStore.setIsCtrlOrCmdDownStatus(false)
  } else if (keyType === 'ctrl' && isShiftDown) {
    isShiftDown = false
    composeStore.setIsShiftDownStatus(false)
  }
}

function copy() {
  copyStore.copy()
}

function paste() {
  copyStore.paste(false)
  snapshotStore.recordSnapshotCache('key-paste')
}

function move(keyCode) {
  if (curComponent.value) {
    const scale = dvMainStore.canvasStyleData.scale / 100
    if (keyCode === leftKey) {
      curComponent.value.style.left = curComponent.value.style.left - scale
      groupAreaAdaptor(-scale, 0)
    } else if (keyCode === rightKey) {
      curComponent.value.style.left = curComponent.value.style.left + scale
      groupAreaAdaptor(scale, 0)
    } else if (keyCode === upKey) {
      curComponent.value.style.top = curComponent.value.style.top - scale
      groupAreaAdaptor(0, -scale)
    } else if (keyCode === downKey) {
      curComponent.value.style.top = curComponent.value.style.top + scale
      groupAreaAdaptor(0, scale)
    }
    snapshotStore.recordSnapshotCache('key-move')
  }
}

function groupAreaAdaptor(leftOffset = 0, topOffset = 0) {
  const canvasId = curComponent.value.canvasId
  const parentNode = document.querySelector('#editor-' + canvasId)

  //如果当前画布是Group内部画布 则对应组件定位在resize时要还原到groupStyle中
  if (isGroupCanvas(canvasId) || isTabCanvas(canvasId)) {
    groupStyleRevert(curComponent.value, {
      width: parentNode.offsetWidth,
      height: parentNode.offsetHeight
    })
  } else if (curComponent.value.component === 'GroupArea' && areaData.value.components.length > 0) {
    areaData.value.components.forEach(component => {
      component.style.top = component.style.top + topOffset
      component.style.left = component.style.left + leftOffset
    })
  }
}

function cut() {
  copyStore.cut()
}

function redo() {
  snapshotStore.redo()
}

function undo() {
  snapshotStore.undo()
}

function compose() {
  if (areaData.value.components.length) {
    composeStore.compose()
    snapshotStore.recordSnapshotCache('key-compose')
  }
}

function decompose() {
  const curComponentLink = curComponent.value
  if (curComponentLink && !curComponentLink.isLock && curComponentLink.component == 'Group') {
    composeStore.decompose()
    snapshotStore.recordSnapshotCache('key-decompose')
  }
}

function save() {
  eventBus.emit('save')
}

function preview() {
  eventBus.emit('preview')
}

function deleteComponent() {
  if (curComponent.value && curComponent.value.component !== 'GroupArea') {
    const curInfo = getCurInfo()
    if (curInfo) {
      dvMainStore.deleteComponent(curInfo.index, curInfo.componentData)
    }
  } else if (areaData.value.components.length) {
    areaData.value.components.forEach(component => {
      dvMainStore.deleteComponentById(component.id)
    })
    eventBus.emit('hideArea-canvas-main')
  }
  snapshotStore.recordSnapshotCache('listenGlobalKeyDown')
}

function clearCanvas() {
  eventBus.emit('clearCanvas')
}

function lock() {
  lockStore.lock()
}

function unlock() {
  lockStore.unlock()
}