export default class toggle{

	boxCursor			= "pointer";

	cursor				= "pointer";

	boxBorderRadius		= 16;

	boxBackground		= "grey"

	boxWidth			= 50;

	boxHeight			= 24;

	height				= 20;

	width				= 20;

	margin				= 2;

	borderRadius		= "100%"

	background			= "white";

	transform;

	value				= true;

	transition			= "0.2s";

	boxTransition		= "0.2s";

	create() {

		if( this.value ) {

			this.transform 		= "translateX(130%)";

			this.boxBackground	= "green";


		} else {

			this.transform 		= "translateX(0%)";

			this.boxBackground	= "grey";

		}

	}

	boxClick( event ) {

		this.updateState( event );


	}

	click( event ) {

		this.updateState( event );

	}


	updateState( event ) {

		if( this.value ) {

			this.transform 		= "translateX(0%)";

			this.boxBackground	= "grey";

			this.value			= false;

		} else {

			this.transform 		= "translateX(130%)";

			this.value			= true;

			this.boxBackground	= "green";

		}

		if( this.change ) {

			this.change( event );

		}

	}
	
}