import { defineStore, storeToRefs } from 'pinia'
import { store } from '../../index'
import { dvMainStoreWithOut } from './dvMain'
import { $, deepCopy } from '@/utils/utils'
import decomposeComponent from '@/utils/decomposeComponent'
import { generateID } from '@/utils/generateID'
import {
  commonStyle,
  commonAttr,
  COMMON_COMPONENT_BACKGROUND_MAP
} from '@/custom-component/component-list'
import { createGroupStyle, getComponentRotatedStyle } from '@/utils/style'
import eventBus from '@/utils/eventBus'
import { canvasIdMapCheck, checkJoinGroup, isTabCanvas } from '@/utils/canvasUtils'
import { useI18n } from '@/hooks/web/useI18n'
const { t } = useI18n()

const dvMainStore = dvMainStoreWithOut()
const { curComponent, componentData, curOriginThemes } = storeToRefs(dvMainStore)

export const composeStore = defineStore('compose', {
  state: () => {
    return {
      areaData: {
        // 选中区域包含的组件以及区域位移信息
        style: {
          top: 0,
          left: 0,
          width: 0,
          height: 0
        },
        components: []
      },
      editorMap: {},
      isCtrlOrCmdDown: false,
      isSpaceDown: false,
      isShiftDown: false,
      laterIndex: null, //最后点击组件的索引
      editor: null
    }
  },
  actions: {
    getEditor(canvasId = 'canvas-main') {
      this.editorMap[canvasId] = $('#editor-' + canvasId)
    },

    setLaterIndex(value) {
      this.laterIndex = value
    },
    setSpaceDownStatus(value) {
      this.isSpaceDown = value
    },
    setIsCtrlOrCmdDownStatus(value) {
      this.isCtrlOrCmdDown = value
    },
    setIsShiftDownStatus(value) {
      this.isShiftDown = value
    },
    setAreaData(data) {
      this.areaData = data
    },
    updateGroupBorder(canvasId) {
      if (canvasId) {
        // 1.查找所属分组
        const groupId = canvasId.replace('Group-', '')
        const sourceGroupComponent = componentData.value.filter(ele => ele.id === groupId)[0]
        const sourceSubComponents = sourceGroupComponent.propValue
        // 2. 还原分组内部组件再主画布位置
        const sourceParentStyle = { ...sourceGroupComponent.style }
        sourceSubComponents.forEach(subcomponent => {
          decomposeComponent(subcomponent, null, sourceParentStyle)
        })
        const newAreaData = {
          // 选中区域包含的组件以及区域位移信息
          style: {
            top: 0,
            left: 0,
            width: 0,
            height: 0
          },
          components: sourceSubComponents
        }
        // 3.重新计算分组区域边界
        this.calcComposeArea(newAreaData)
        sourceGroupComponent.style = {
          ...sourceGroupComponent.style,
          ...newAreaData.style
        }
        sourceSubComponents.forEach(component => {
          component.canvasId = canvasId
        })
        // 4.计算内部子组件位置
        createGroupStyle(sourceGroupComponent)
      }
    },

    alignment: function (params) {
      const { areaData } = this
      if (areaData.components.length === 1) {
        // 一个组件不进行组合直接释放
        areaData.components = []
        return
      }
      if (areaData.components.length > 0 && areaData.style.width === 0) {
        // 计算组合区域
        this.calcComposeArea()
      }
      const { left, top, width, height } = areaData.style
      const areaRight = left + width
      const areaTransverseCenter = left + width / 2 // 横向中心点
      const areaBottom = top + height
      const areaDirectionCenter = top + height / 2 // 纵向中心点

      areaData.components.forEach(component => {
        if (params === 'left') {
          // 居左
          component.style.left = left
        } else if (params === 'right') {
          // 居右
          component.style.left = areaRight - component.style.width
        } else if (params === 'top') {
          // 居上
          component.style.top = top
        } else if (params === 'bottom') {
          // 居下
          component.style.top = areaBottom - component.style.height
        } else if (params === 'transverse') {
          // 横向居中
          component.style.left = areaTransverseCenter - component.style.width / 2
        } else if (params === 'direction') {
          // 纵向
          component.style.top = areaDirectionCenter - component.style.height / 2
        }
      })
    },

    compose: function (canvasId = 'canvas-main') {
      const editor = this.editorMap[canvasId]
      const { areaData } = this
      if (areaData.components.length === 1) {
        // 一个组件不进行组合直接释放
        areaData.components = []
        return
      }
      if (areaData.components.length > 0) {
        // 计算组合区域
        this.calcComposeArea()
      }

      const components = []
      areaData.components.forEach(component => {
        if (['Group'].includes(component.component)) {
          // 如果要组合的组件中，已经存在组合数据，则需要提前拆分
          const parentStyle = { ...component.style }
          const subComponents = component.propValue
          const editorRect = editor.getBoundingClientRect()

          subComponents.forEach(component => {
            decomposeComponent(component, editorRect, parentStyle)
          })

          components.push(...component.propValue)
        } else if (['GroupArea'].includes(component.component)) {
          // do nothing GroupAreas组合视阔区 DeTabs 均不加入分组中
        } else if (checkJoinGroup(component)) {
          components.push(component)
        }
      })

      const newId = generateID()
      components.forEach(component => {
        component.canvasId = 'Group-' + newId
      })
      const groupComponent = deepCopy({
        id: newId,
        component: 'Group',
        canvasActive: false,
        name: t('visualization.view_group'),
        label: t('visualization.view_group'),
        icon: 'group',
        expand: true,
        commonBackground: {
          ...COMMON_COMPONENT_BACKGROUND_MAP[curOriginThemes.value],
          backgroundColorSelect: false,
          innerPadding: 0
        },
        ...commonAttr,
        style: {
          ...commonStyle,
          ...areaData.style
        },
        propValue: components
      })

      createGroupStyle(groupComponent)
      dvMainStore.addComponent({
        component: groupComponent,
        index: undefined
      })

      eventBus.emit('hideArea-canvas-main')
      this.batchDeleteComponent(areaData.components)
      dvMainStore.setCurComponent({
        component: componentData.value[componentData.value.length - 1],
        index: componentData.value.length - 1
      })

      this.areaData.components = []
    },

    // 将已经放到 Group 组件数据删除，也就是在 componentData 中删除，因为它们已经从 componentData 挪到 Group 组件中了
    batchDeleteComponent(deleteData) {
      deleteData.forEach(component => {
        if (!['GroupArea'].includes(component.component)) {
          for (let i = 0, len = componentData.value.length; i < len; i++) {
            if (component.id == componentData.value[i].id) {
              componentData.value.splice(i, 1)
              break
            }
          }
        }
      })
    },

    decompose() {
      const canvasId = curComponent.value.canvasId
      const editor = this.editorMap[canvasId]
      if (!editor) {
        return
      }
      const parentStyle = { ...curComponent.value.style }
      const components = curComponent.value.propValue
      const editorRect = editor.getBoundingClientRect()
      const isInTab = isTabCanvas(canvasId)
      let decomposeComponentData = componentData.value
      let parentGroupStyle = null
      if (isInTab) {
        const pathMap = {}
        componentData.value.forEach(componentItem => {
          canvasIdMapCheck(componentItem, null, pathMap)
        })
        const pComponent = pathMap[curComponent.value.id]
        const pComponentTarget = pComponent.propValue.filter(
          item => canvasId.indexOf(item.name) > -1
        )
        if (pComponentTarget && pComponentTarget.length > 0) {
          decomposeComponentData = pComponentTarget[0].componentData
        }
        parentGroupStyle = curComponent.value.groupStyle
      }
      dvMainStore.deleteComponentById(curComponent.value.id, decomposeComponentData)
      components.forEach(component => {
        decomposeComponent(component, editorRect, parentStyle, canvasId, parentGroupStyle)
        dvMainStore.addComponent({
          component: component,
          index: undefined,
          isFromGroup: true,
          componentData: decomposeComponentData
        })
      })
    },
    calcComposeArea(areaDataValue = this.areaData) {
      if (areaDataValue.components <= 1) {
        return
      }
      // 根据选中区域和区域中每个组件的位移信息来创建 Group 组件
      // 要遍历选择区域的每个组件，获取它们的 left top right bottom 信息来进行比较
      let top = Infinity,
        left = Infinity
      let right = -Infinity,
        bottom = -Infinity
      areaDataValue.components.forEach(component => {
        let style = { left: 0, top: 0, right: 0, bottom: 0 }
        style = getComponentRotatedStyle(component.style)

        if (style.left < left) left = style.left
        if (style.top < top) top = style.top
        if (style.right > right) right = style.right
        if (style.bottom > bottom) bottom = style.bottom
      })

      // 设置选中区域位移大小信息和区域内的组件数据
      areaDataValue.style = {
        left,
        top,
        width: right - left,
        height: bottom - top
      }
    }
  }
})

export const composeStoreWithOut = () => {
  return composeStore(store)
}