import zim from "https://zimjs.org/cdn/00/zim";

// see https://zimjs.com
// and https://zimjs.com/learn
// and https://zimjs.com/docs

const frame = new Frame(FIT, 1024, 768, darker, dark);
frame.on("ready", () => {
    const stage = frame.stage;
	const stageW = frame.width;
	const stageH = frame.height;
   
    // put your code here
	
	// made a quick path here https://zimjs.com/paths and copied the point data
	const points = [[-41.1,165.4,0,0,-28.2,105.9,28.2,-105.9],[147.7,32.8,0,0,-57,18.7,120.9,-39.7,"straight"],[145,-141.5,0,0,105.2,26.4,-54.8,-13.8,"straight"],[21.3,-102.4,0,0,18,-31.7,-34.8,61.3],[114.7,-36.3,0,0,-72.1,13.1,72.1,-13.1],[426.1,-60.3,0,0,-94.8,-34.1,94.8,34.1]];
	
	const path = new Squiggle({
		points:points,
		interactive:false, // remove or set to true to allow user to change with path
		thickness:1,		
		color:grey
	})
		.transformPoints("scale", 1.8)
		.center();
	
	// emojis are different in different browsers 
	// on the PC we want to rotate the emoji 45 degrees to be straight on the path 
	// animate the container but rotate the object in the container
	let label;
	const plane = new Container()
		.addTo()
		.animate({
			time:4,
			props:{path:path},
			startPaused:false, // remove or set to true to not animate but only drag		
			drag:true, // optional
			call:()=>{
				label = new Label("drag plane", 30, null, yellow).pos(100, 0, RIGHT, CENTER);
			}
		});	
	new Emoji("✈️", 100)
		.centerReg(plane)
		.rot(45);
	
	// remove instructions if press on plane
	plane.on("mousedown", e=>{
		if (label) {
			label.removeFrom();
			e.remove(); // remove event
		}
	});
	
	frame.madeWith().pos(40,40,RIGHT,BOTTOM);
	
	  
    stage.update(); // needed to view 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=Squiggle
	// https://zimjs.com/docs.html?item=Label
	// https://zimjs.com/docs.html?item=Emoji
	// https://zimjs.com/docs.html?item=animate
	// https://zimjs.com/docs.html?item=pos
	// https://zimjs.com/docs.html?item=rot
	// 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=transformPoints
	
	
});