const assets = [
	{src:`https://fonts.googleapis.com/css?family=Chivo:900`},
	{src:`https://fonts.googleapis.com/css?family=Cabin+Sketch:700`},
];

const frame = new Frame({scaling:"fit", width:1024, height:768, color:moon, outerColor:dark, assets:assets, retina:false});
frame.on("ready", ()=>{ // ES6 Arrow Function - similar to function(){}
	zog("ready from ZIM Frame"); // logs in console (F12 - choose console)

	// often need below - so consider it part of the template
	let stage = frame.stage;
	let stageW = frame.width;
	let stageH = frame.height;

	// REFERENCES for ZIM at http://zimjs.com
	// see http://zimjs.com/learn.html for video and code tutorials
	// see http://zimjs.com/docs.html for documentation
	// see https://www.youtube.com/watch?v=pUjHFptXspM for INTRO to ZIM
	// see https://www.youtube.com/watch?v=v7OT0YrDWiY for INTRO to CODE

	// CODE HERE
	
	const backing = new Rectangle(stageW, stageH-240, frame.color).addTo();
	
	// let user drag items and have them snap onto lines vertically
	const lineHeight = 80;
	new Tile(new Rectangle(stageW, lineHeight, clear, light), 1, 3, 0, lineHeight).loc(0, lineHeight/2)
	
	const tray = new Rectangle(stageW, 240).alp(.1).pos(0,0,null,true);	
	const parts = new Container(stageW, stageH).addTo(); // will hold all items we drag
	const code = new Container(stageW, stageH).addTo(); // will hold all items showing created code
	const multi = new Container().addTo(); // will hold all multiple selected items being dragged
			
	const symbols = ["[", "]", "(", ")", "{", "}", "=", ",", ".", ":", ";", "<", ">", "!", "+", "-"];
	const words = ["var", "function", "OBJ", "ID", "property", "method", "if", "for"];
	const colors = [purple, purple, red, grey, blue, orange, purple, purple];

	// prepare labels from symbols and words 
	// these are slightly different so do each separately
	loop(symbols, (symbol, i)=>{
		symbols[i] = new Label({
			font:"Chivo",
			text:symbol,
			size:55,
			color:grey,
			backgroundColor:white,
			shiftVertical:-3,
			paddingVertical:0			
		}).centerReg({add:false});
	});
	
	loop(words, (word, i)=>{
		words[i] = new Label({
			font:"Chivo",
			text:word,
			size:34,
			color:white,
			backgroundColor:colors[i],
			shiftVertical:0,
			paddingVertical:6			
		}).centerReg({add:false});
	});
	
	// make a tile for each set 
	// we pass each tile into a prepareTile function 
	// which does a few more things to the tile
	
	prepareTile(
		new Tile({
			obj:series(symbols), 
			cols:symbols.length, 
			spacingH:20
		}).center().pos(null,40,null,true)
	);		
	
	prepareTile(
		new Tile({
			obj:series(words), 
			cols:words.length,
			spacingH:20
		}).center().pos(null,145,null,true).drag()
	);
	
	// create an emitter to run when we delete
	const emitter = new Emitter({startPaused:true});
	
	// remove the objects from the tile and add to parts container 
	// ZIM will keep the same apparent position 
	// this lets the currently dragged item come to top 
	// we can't do this if they are in two different containers
	// we also add events to handle dragging a copy
	
	function prepareTile(tile) {
		tile.loop(obj=>{
			obj.addTo(parts).drag();
			obj.on("mousedown", downHandler);
			obj.on("pressup", upHandler);
		}, true); // reverse loop when removing
		tile.removeFrom();
	}
	
	// here are the event functions to handle dragging a copy
	// it is a little tricky as we need to drag what we mousedown on 
	// which if we try and drag a copy... the copy is made after mousedown 
	// so zim drag will not have a mousedown to start the drag 
	// so... we drag the original and then swap the items on pressup
	// see https://zimjs.com/bits/view/drag.html for more
	
	let current = null;
	function downHandler(e) {
		current = e.target;		
		current.copy = current.clone()
			.loc(current, null, parts)
			.ord(-1) // move to under current
			.drag(); // for dragging later	
		current.background.sha("rgba(0,0,0,.2)",5,5,2);
		// add the shadow if picked up again later
		current.copy.on("mousedown", e=>{
			e.target.background.sha("rgba(0,0,0,.2)",5,5,2);
		});
		current.copy.on("pressup", e=>{
			e.target.background.shadow = null;			
			timeout(50, ()=>{
				snapVertical(e.target);
				stage.update();
			});
			deleteTest(e.target); // check for deleting	
			stage.update();
		});
		code.ord(-1); // want to drag original part above existing code
		stage.update();
	}
	
	
	function upHandler(e) {
		current = e.currentTarget;
		current.background.shadow = null;
		// swap positions
		swapProperties("x", current, current.copy);
		swapProperties("y", current, current.copy);		
		snapVertical(current.copy);
		current.copy.addTo(code);
		deleteTest(current.copy); // test if dropped in tray... sigh
		code.ord(1); // now want to drag existing code above original parts
		stage.update();
	}
	
	function snapVertical(obj) {
		obj.y = Math.round(obj.y/lineHeight)*lineHeight;
	}
	
	function deleteTest(obj) {
		if (obj.y > tray.y) {
			emitter.loc(obj).spurt(10);
			obj.animate({
				props:{alpha:0}, 
				time:400,
				call:target=>{target.removeFrom();}
			});
		}		
	}
	
	// multiple select 	
	// create a select box and hitTest that against code 
	// if hitting add to multi Container so can drag all at once 
	// when done dragging add back to code
	const select = new Shape(stageW, stageH).addTo();
	select.graphics.f("rgba(0,0,0,.05)").s(dark).ss(2).sd([20,10],0);
	let selectX = 0;
	let selectY = 0;
	backing.on("mousedown", ()=>{
		selectX = frame.mouseX;
		selectY = frame.mouseY;
	});
	backing.on("pressmove", ()=>{
		select.graphics
			.c().f("rgba(0,0,0,.05)").s(dark).ss(1).sd([10,10],5)
			.dr(selectX, selectY, frame.mouseX-selectX, frame.mouseY-selectY);
		stage.update();
	});
	let clearEvent = null;
	backing.on("pressup", ()=>{		
		code.loop(item=>{
			// use shadow to show item is selected
			if (select.hitTestRect(item)) {
				item.addTo(multi);
				item.background.sha("rgba(0,0,0,.2)",5,5,2);
			}			
		}, true); // loop backwards when removing items from container
		if (multi.numChildren > 0) {
			// set event to turn selection off if not dragging selection
			clearEvent = stage.on("stagemouseup", ()=>{
				multi.loop(item=>{
					item.addTo(code);
					item.background.shadow = null;
				}, true); // loop backwards when removing items from container
				stage.update();
			}, null, true); // run once
		}
		select.graphics.c();
		stage.update();
	});
	multi.drag({all:true}); // drag whole container not individual item selected
	multi.on("mousedown", ()=>{
		// clear event is conflicting with pressup so delete it
		stage.off("stagemouseup", clearEvent);
	});
	multi.on("pressup", ()=>{
		multi.loop((item,i)=>{
			item.addTo(code);
			item.background.shadow = null;
			snapVertical(item);			
			// one particle emitter so share across items
			timeout(70*i, ()=>{deleteTest(item)}); 
		}, true); // loop backwards when removing items from container
	});
	
	STYLE = {font:"Cabin Sketch"};
	new Pane({
		width:800,
		height:350,
		label:"Practice general code structure\n\nExample: var ID = OBJ;\n\nDragged parts can be multiselected\nDrop parts at bottom to delete",
		color:white,
		backgroundColor:dark,
		corner:10,
		close:true
	}).show().mov(0,-100);
	
	new Label({
		font:"Cabin Sketch",
		text:"CODE GENERAL"
	}).pos(12,6).alp(.8).sca(1)
	

	stage.update(); // this is needed to show any changes

	// DOCS FOR ITEMS USED
	// https://zimjs.com/docs.html?item=Frame
	// https://zimjs.com/docs.html?item=Container
	// https://zimjs.com/docs.html?item=Shape
	// https://zimjs.com/docs.html?item=Rectangle
	// https://zimjs.com/docs.html?item=Label
	// https://zimjs.com/docs.html?item=Tile
	// https://zimjs.com/docs.html?item=drag
	// https://zimjs.com/docs.html?item=hitTestRect
	// https://zimjs.com/docs.html?item=animate
	// https://zimjs.com/docs.html?item=loop
	// https://zimjs.com/docs.html?item=sha
	// https://zimjs.com/docs.html?item=pos
	// https://zimjs.com/docs.html?item=loc
	// https://zimjs.com/docs.html?item=ord
	// https://zimjs.com/docs.html?item=alp
	// https://zimjs.com/docs.html?item=sca
	// https://zimjs.com/docs.html?item=addTo
	// https://zimjs.com/docs.html?item=removeFrom
	// https://zimjs.com/docs.html?item=centerReg
	// https://zimjs.com/docs.html?item=center
	// https://zimjs.com/docs.html?item=Emitter
	// https://zimjs.com/docs.html?item=timeout
	// https://zimjs.com/docs.html?item=swapProperties
	// https://zimjs.com/docs.html?item=zog

}); // end of ready