import paper from "paper"
import { useBottomToolsStore } from "./useBottomToolsStore"
import { usePaperStore } from "./usePaperStore"
import { useRightToolsStore } from "./useRightToolsStore"

const clearGroupPath = () => {
  const group = usePaperStore.getState().group
  if (!group) return
  const paths = group.getItems({ data: { type: "groupPath" } })
  paths.forEach((path) => {
    path.remove()
  })
}

export const renderGroupPath = () => {
  const group = usePaperStore.getState().group
  const visible = useRightToolsStore.getState().groupPathVisible
  const imageId = useBottomToolsStore.getState().activeImage
  const groupMap =
    useRightToolsStore.getState().pathGroupMap.get(imageId) ??
    new Map<number, number[]>()

  console.log("render group", group, groupMap)

  if (!group) return
  clearGroupPath()
  if (!Array.from(groupMap.values()).length) return

  for (let [groupId, pathIds] of groupMap) {
    let boundsArr: any[] = []
    pathIds.forEach((pathId) => {
      const path = usePaperStore.getState().getItemById(pathId)!
      console.log(path)
      if (path) {
        path.data = { ...path.data, parentGroupId: groupId }
        boundsArr.push(path.bounds)
      }
    })
    console.log(boundsArr)
    if (!boundsArr.length) continue
    // pathIds.length 必大于等于2
    let uniteBounds = boundsArr[0].unite(boundsArr[1])
    for (let i = 2; i < boundsArr.length; i++) {
      uniteBounds = uniteBounds.unite(boundsArr[i])
    }
    // draw groupPath
    let groupPath = new paper.Path.Rectangle(uniteBounds)
    groupPath.set({
      data: { type: "groupPath", groupId, childPathIds: pathIds },
      strokeColor: "white",
      strokeWidth: 2,
      strokeScaling: false,
      parent: group,
      visible,
    })
    const text = `@${groupId}`
    const pos = [
      groupPath.bounds.left - text.length * 15,
      groupPath.bounds.top + 18,
    ]
    const textPath = new paper.PointText(pos)
    textPath.set({
      content: text,
      fontSize: 18,
      fontWeight: "bold",
      fillColor: "white",
      data: {
        groupId,
        type: "groupPath",
        blankColor: "white",
      },
      parent: group,
      visible,
    })
    const textMask = new paper.Path.Rectangle(textPath.bounds)
    textMask.set({
      strokeColor: "white",
      strokeWidth: 2,
      strokeScaling: false,
      data: {
        groupId,
        type: "groupPath",
      },
      parent: group,
      visible,
    })
  }
}