interface TreeNode {
  level: number // 标题的层级（1-6）
  text: string // 标题的文本内容
  children: TreeNode[] // 子节点
}

export function htmlToTree(html: string): TreeNode[] {
  // 创建一个虚拟的 DOM 元素来解析 HTML
  const parser = new DOMParser()
  const doc = parser.parseFromString(html, 'text/html')

  // 获取所有的 h1 到 h6 标签
  const headers = Array.from(doc.querySelectorAll('h1, h2, h3, h4, h5, h6'))

  // 初始化树结构和栈
  const root: TreeNode = { level: 0, text: '', children: [] }
  const stack: TreeNode[] = [root]

  // 遍历所有标题标签
  headers.forEach((header) => {
    const level = parseInt(header.tagName[1]) // 获取标题的层级（1-6）
    const text = header.textContent?.trim() || '' // 获取标题的文本内容

    // 创建当前节点
    const currentNode: TreeNode = {
      level,
      text,
      children: [],
    }

    // 找到当前节点的父节点
    while (stack.length > 0 && stack[stack.length - 1].level >= level) {
      stack.pop() // 弹出栈顶元素，直到找到合适的父节点
    }

    // 将当前节点添加到父节点的 children 中
    const parent = stack[stack.length - 1]
    parent.children.push(currentNode)

    // 将当前节点压入栈
    stack.push(currentNode)
  })

  return root.children // 返回树的根节点的子节点
}

export function createAnchorNames(element: Element): void {
  // 获取所有的 h1 到 h6 标签

  const headers = element.querySelectorAll('h1, h2, h3, h4, h5, h6')
  // debugger
  // 遍历每个标题标签
  headers.forEach((header, index) => {
    // 获取标题的文本内容

    // 生成唯一的 anchor name（移除特殊字符并用连字符连接）
    const anchorName = `my-section-${index + 1}`

    // 将生成的 anchor name 设置为 id 属性
    header.id = anchorName
  })
}
