import icon	from "/elements/icon.js";


class maximizeButton extends icon{

	margin	= 20;

	cursor	= "pointer"

	width	= 16;

	height	= 16;

	backgroundSize	= "contain!important";

	#ifdef LIGHT

		filter				= "invert(0)"
		
	#endif

	#ifdef DARK

		filter				= "invert(1)"

	#endif


	click() {

		var window = this.parent.parent.parent;


		if( window.state == "maximized" ) {

			window.restore();

			window.state	= "normal";

			this.setImage("assets/images/icons/maximize.svg")

		} else {

			window.maximize();

			window.state	= "maximized";

			this.setImage("assets/images/icons/restore.svg")


		}
	}

	constructor() {

		super("maximize.svg")

	}

	transition	= "1s"

}



class closeButton extends icon{

	margin	= 20;

	cursor	= "pointer"

	width	= 16;

	height	= 16;

	backgroundSize	= "contain!important";

	#ifdef LIGHT

		filter				= "invert(0)"
		
	#endif

	#ifdef DARK

		filter				= "invert(1)"

	#endif


	click() {

		this.parent.parent.parent.hide();

	}

	constructor() {

		super("close.svg")

	}


}


class leftControl{



	closeButton		= new closeButton();

	maximizeButton	= new maximizeButton();

	#ifdef DARK

		color		= "#363636";

	#endif

	height		= "40px"

	display		= "flex";

	layers		= 1;

	flex		= "1";

	flexDirection	= "row"

}

class title{

	//background	= "blue";

	setTitle( title ) {

		this.element.innerText = title;

	}

	padding		= 20;

	height		= "40px"

	display		= "block";

	layers		= 1;

}


class rightControl{

	//background	= "yellow";

	height		= "40px"

	display		= "block";

	flex		= "1";

	layers		= 1;

}


export default class windowHeader{



	constructor( text, gridName ) {

		this.title.text 		= text;
		
		this.gridArea 	= gridName;

	}



	setTitle( title ) {

		this.title.setTitle( title );
	}

	boxShadow				= "0px 1px 1px 0px #00000008";

	marginBottom			= 10;


	leftControl		= new leftControl();

	title			= new title();

	rightControl	= new rightControl();



	width			= "100%";

	layers			= 1;

	gridArea		= "passwordLabel";

	color			= "black";

	//padding			= 20;

	fontWeight		= "bold";

	fontSize		= 12;

	#ifdef WINDOWS

		#ifdef LIGHT




		#endif


		#ifdef DARK

			color	= "white";

		#endif
	

	#endif


	#ifdef MACOS

		borderTopLeftRadius		= "4px"

		borderTopRightRadius	= "4px" 

		//padding					= 10;

		//paddingLeft				= 0;

		boxWidth				= "100%";




		#ifdef LIGHT

			borderBottom			= "1px solid #f1f1f1";

			background	= "white";


		#endif


		#ifdef DARK

			color					= "white";

			borderBottom			= "1px solid black";

			background				= "#1c1c1c";

		#endif
	

	#endif


}