class editor{

	create( applicationThree, selector ) {

		//var selector = 


		//var id = app.selector.replace("#", "");

		var playground				= document.createElement("div");
		playground.className 		= "playground";
		
		
		var fileTree				= document.createElement("div");
		fileTree.className 			= "_fileTree fileTree";
		
		var textarea = document.createElement("textarea");
		
		
		playground.appendChild( textarea );
		
		selector.appendChild( playground );
		
		textarea.value	= applicationThree.files[0].source;
/*
editor
*/
		var filetree = this.createFileTreeMenu( applicationThree, editor );

		//filetree = document.createElement("div");
		
		//filetree.className = "";
		
		fileTree.appendChild( filetree );

		var outputDiv	= document.createElement("div");
		
		outputDiv.className = "outputDiv";
		//outputDiv.id 	= id;

		console.log( "applicationThree", applicationThree );
		console.log("textarea", textarea);
		
		
		playground.prepend( fileTree );
		
		//playground.appendChild( outputDiv );
		
		
		//this.createTreeJS( applicationThree, editor, app.selector );
		
		document.querySelector(".CodeMirror").style.height 		=  "900px";//document.body.clientHeight - 46  + "px";
		document.querySelector(".fileTree").style.height 		= 	"569px";//document.body.clientHeight - 46  + "px";
		//document.querySelector(".outputDiv").style.height 		=  "569px";//document.body.clientHeight - 46  + "px";
		
		
		var documentWidth	= document.body.clientWidth;
		var editorWidth 	= document.querySelector(".CodeMirror").clientWidth;
		var fileTreeWidth	= document.querySelector(".fileTree").clientWidth;
		
		//document.querySelector(".outputDiv").style.width = documentWidth - ( fileTreeWidth + editorWidth ) - 12 + "px";

		var outputDiv	= document.createElement("div");
		
		outputDiv.className = "outputDiv";
		//outputDiv.id 	= id;


		selector.appendChild( outputDiv );

/*
		const ps = new PerfectScrollbar(selector, {

			wheelSpeed: 2,
			wheelPropagation: true,
			minScrollbarLength: 20

		});
	*/	


		return editor;

	}


	createFileTreeMenu( applicationThree, editor ) {
	
		var fileList = this.createFileTreeMenuItem( applicationThree, true, editor );

		return fileList;
	
	}
	
	createFileTreeMenuItem( file, first, editor ) {

		var files		= file.files;

		var fileList	= document.createElement("li");
		
		var row		= document.createElement("div");
		
		var label		= document.createElement("div");

		if( file.type == "directory" ) {
		
			row.className = "caret";
			
			row.state = "closed";

			row.onclick = function() {
			
				this.parentElement.querySelector(".nested").classList.toggle("active");
				
				this.querySelector(".directory_icon").classList.toggle("open_directory");


				if( this.state == "closed" ) {

					this.state = "open";

				} else {

					this.state = "closed";

				}

			}

			var icon	= document.createElement("div");
			
			icon.className 	= "directory_icon";
			
			row.prepend( icon );
			
		} else {

			var icon	= document.createElement("div");
			
			icon.className 	= "file_icon";
			
			row.prepend( icon );


		}
	
		row.className = "file_row";

		label.innerText = file.name;

		row.appendChild( label );

		
		if( file.type == "file" ) {


		
			row.onclick	= function() {
			
				if(document.querySelectorAll(".file_row.highlighted").length > 0) {

					document.querySelector(".file_row.highlighted").classList.toggle("highlighted");

				}

				this.classList.toggle("highlighted");

				var mode = {name: "javascript"};
		
				var codeMirrorDocument = CodeMirror.Doc( file.source, mode );
				
				//editor.swapDoc( codeMirrorDocument );
				// alternative
			
			}
			
		}
		
		fileList.appendChild( row );
		
		var treeMenu	= document.createElement("ul");
		
		
		if( !first ) {
		
			treeMenu.className = "nested"
		
		}
		
		for( var c = 0; c<files.length;c++ ) {
		
			var childFile = files[c];
			
			var childList = this.createFileTreeMenuItem( childFile, false, editor );
			
			treeMenu.appendChild( childList ); 
		
		}

		fileList.appendChild( treeMenu );
		
		if(first) {
		
			return treeMenu;
		
		}

		return fileList;
		
	}
}


export default new editor();