//////////////////////////////////////////////////////////////////////
// CXFlowMonitor
function CXFlowMonitor(px){
	const el_control=px.el_control;

	// XFlow
	const XFlow=px.XFlow;
	const xfn_root=XFlow.find("/");

	// Display Queue
	const b_console=px.b_console?px.b_console:0;
	let exeque=[];
	let b_timer=null;

	// create a montree mapping
	const monmap=new WeakMap();
	const montrees=px.montrees?px.montrees:["/"];
	montrees.forEach((path)=>{
		const xfn=XFlow.find(path);
		monmap.set(xfn,{
			path,
			idx:1,
			el_prev:null,
		});
	});

	function getMonTreeRoot(xfn){
		if(xfn){
			const rec=monmap.get(xfn);
			if(rec){
				return rec;
			}else if(xfn.prt){
				return getMonTreeRoot(xfn.prt);
			}
		}
		return null;
	};

	function monitor(idx,vpath,globals){
		const vx=vpath.split(".");
		let p=globals;
		for(let i=0;i<vx.length;i++){
			const item=vx[i];
			if(item in p){
				p=p[item];
			}else{
				p="#undefined";
				break;
			}
		}
		console.log("["+idx+"]",vpath,p);
	};

	// put it into que
	function putQue(el,xfn){
		// find montree root
		const rec=getMonTreeRoot(xfn);
		if(rec){

			// monitor variables
			if(rec.path=="/player"){
				//monitor(rec.idx,"fctrl.session_idx",px.globals);
			}

			exeque.unshift({
				idx:rec.idx,
				el_prev:rec.el_prev,
				el,
				xfn,
			});
			rec.idx++;
			rec.el_prev=el;
		}else{
			return;
		}

		function show(rec){
			if(rec.el_prev){
				rec.el_prev.classList.remove("xflowmon-running");
			}
			rec.el.classList.add("xflowmon-running");
			rec.el.querySelector(".xflowmon-stepidx").
				innerHTML="["+rec.idx+"]";
			if(b_console){
				console.log("["+rec.idx+"]",rec.xfn.name);
			}
		};

		// timeout
		const f=function(){
			const len=exeque.length;
			if(len){
				let t_step;
				if(len<10){
					t_step=200;
				}else if(len<30){
					t_step=50;
				}else{
					t_step=1;
				}
				show(exeque.pop());
				b_timer=setTimeout(f,t_step);
			}else{
				b_timer=null;
			}
		};
		if(!b_timer){
			f();
		}
	};

	function getTextTree(xfn,indent){
		indent=indent?indent:0;
		xfn=xfn?xfn:xfn_root;
		const tab="\t".repeat(indent);
		const sx=[];
		sx.push(tab
			+(xfn.name?xfn.name:"#NO-NAME")
			+":"+xfn.cidx);
		if(xfn.child){
			let xfn0=xfn.child;
			while(xfn0){
				sx.push(getTextTree(xfn0,indent+1));
				xfn0=xfn0.next;
			}
		}
		return sx.join("\n");
	};

	// node to dom mapping
	let xfnmap=null;
	function updateTree0(xfn,indent){
		// el_xfn
		const el_xfn=document.createElement("div");
		xfnmap.set(xfn,el_xfn);
		el_xfn.className="xflowmon-xfn";
		el_xfn.style["margin-left"]=(indent*30)+"px";
		el_control.append(el_xfn);
		// el_title
		const el_title=document.createElement("span");
		el_title.className="xflowmon-title";
		el_title.innerHTML=(xfn.name?xfn.name:"#no-name")+":"+xfn.cidx;
		el_xfn.append(el_title);
		// el_stepidx
		const el_stepidx=document.createElement("span");
		el_stepidx.className="xflowmon-stepidx";
		el_xfn.append(el_stepidx);
		// children
		if(xfn.child){
			let xfn0=xfn.child;
			while(xfn0){
				updateTree0(xfn0,indent+1);
				xfn0=xfn0.next;
			}
		}
	};

	function updateTree(xfn,indent){
		indent=indent?indent:0;
		xfn=xfn?xfn:xfn_root;
		// create a mapping
		xfnmap=new WeakMap();
		// run
		updateTree0(xfn,indent);
	};

	function moncb(xfn){
		if(xfnmap){
			const el=xfnmap.get(xfn);
			if(el){
				putQue(el,xfn);
			}
		}
	};

	function init(){
		XFlow.setMonitor(moncb);
	};

	init();
	return{
		getTextTree,
		updateTree,
	};
};