import {EventObject} from "xstate";
 import * as Y from "yjs";
import type {VNodeAny} from "atomico/types/vnode";
 /*
const example={
    "type": "main",
    "props": {
        "class": "mx-auto  bg-slate-50 h-full"
    },
    "children": [
        {
            "type": "header",
            "props": {
                "title": "The Wiser"
            },
            "children": [],
            "raw": false
        },
        {
            "type": "div",
            "props": {
                "class": "flex flex-col items-center justify-center *:w-1/2 *:justify-center",
                "hx-ext": "sse",
                "sse-swap": "content",
                "hx-swap": "beforeend"
            },
            "children": [],
            "raw": false
        }
    ],
    "raw": false
}

=> Y.XmlFragment <main class="mx-auto  bg-slate-50 h-full" > <header title="The Wiser" > </header> <div class="flex flex-col items-center justify-center *:w-1/2 *:justify-center" hx-ext="sse" sse-swap="content" hx-swap="beforeend" > </div> </main>
*/
 export  function toFragment(node:VNodeAny) {

     const target = new Y.XmlElement(node.type);
     for (const [key, value] of Object.entries(node.props)) {
         target.setAttribute(key, value?.toString() ?? "");

     }
     target.insert(0, node.children.map(toFragment)); 
     return target;

 }



export async function * toFragmentAsync(events:AsyncIterable<VNodeAny[]>) {
    for await (const event of events) {
        for (const node of event) {
             yield toFragment(node); 
        }
    }
}

export async function * iterateYFragment(fragment:Y.XmlFragment) {
   const pushable =new Y.Array<Y.XmlElement>();
    fragment.observeDeep((event, tr) => {
        const changes =  tr.changedParentTypes
         for (const {action, target} of event.keys) {
              if (action == "add") {
                pushable.push([target]);
              }
         }
    });
}