import { mergeAttributes, Node } from "@tiptap/core"

export const LoopBlockExtension = Node.create({
  name: "loopBlock",
  group: "block",
  content: "block+",
  defining: true,
  isolating: true,

  addAttributes() {
    return {
      id: { default: null },
      source: { default: "items" },
      itemName: { default: "item" },
      indexName: { default: "" }
    }
  },

  parseHTML() {
    return [{ tag: "section[data-blockflow-loop]" }]
  },

  renderHTML({ HTMLAttributes, node }) {
    const suffix = node.attrs.indexName ? ` index ${node.attrs.indexName}` : ""
    return [
      "section",
      mergeAttributes(HTMLAttributes, {
        "data-blockflow-loop": "",
        "data-block-id": node.attrs.id,
        "data-source": node.attrs.source,
        "data-item-name": node.attrs.itemName,
        "data-index-name": node.attrs.indexName,
        class: "bf-structured-block"
      }),
      [
        "div",
        { class: "bf-block-heading bf-loop-heading", contenteditable: "false" },
        `▾ for ${node.attrs.itemName} in ${node.attrs.source}${suffix}`
      ],
      ["div", { class: "bf-block-content" }, 0]
    ]
  }
})