import document 		from '/unify/document.js';

import tools	 		from '/unify/tools.js';

export default class textarea{

	outline					= "none";

	margin					= 12;

	renderToDOM				= true;

	#ifdef MACOS

		width					= "70%";

		#ifdef LIGHT

			background		= "rgb(0 0 0 / 3%)";

			background		= "rgb(0 0 0 / 3%)";

			color			= "black";

		#endif


		#ifdef DARK

			background		= "rgb(255 255 255 / 3%)";

			background		= "#3e3c3c!important";

			color			= "white";

		#endif

		padding					= 6;

		margin					= 6;

		marginRight				= 20;

		height					= "fit-content";

		borderRadius			= 0;

		fontWeight				= "bold";

		fontSize				= 10;

		border					= "1px solid rgb(255 255 255 / 18%)";

	#endif


	#ifdef WINDOWS


		margin					= 12;

		padding					= 12;


		borderWidth				= 1;

		borderRadius			= 6;


		borderColor				= "#E5E5E5";

		borderBottomColor		= "#868686";

		#ifdef LIGHT

			background	= "#F7FAFC";

			border		= "1px solid #E5E5E5";


		#endif


		#ifdef DARK

			background		= "#2D2D2D"

			border			= "1px solid #303030";

			borderBottom	= "2px solid #9A9A9A";

			color			= "WHITE";

		#endif
	
	#endif



	#ifdef ANDROID

		margin		 = 4

		height			= "auto"
		#ifdef LIGHT

			border		= "1px solid #E5E5E5";

			borderRadius	= 20;

			background		= "white";

			padding			= 6;

		#endif

	#endif



	focus() {

		#ifdef WINDOWS

		#ifdef LIGHT

			this.borderBottom		= "2px solid #0067C0";

			this.background			= "white";

		#endif 

		#ifdef DARK


			this.borderBottom		= "2px solid #4CC2FF";

			this.background			= "#1F1F1F";

		#endif

		#endif WINDOWS

	}

	blur() {


		#ifdef WINDOWS

		#ifdef LIGHT

			this.background			= "#fbfbfb";

			this.borderBottom		= "2px solid #868686";

		#endif 

		#ifdef DARK


			this.background		= "#2D2D2D"

			this.borderBottom	= "1px solid #9A9A9A";

		#endif

		#endif WINDOWS
		
	}


	value 	= "";

	layers	= 1;

	
	customElement 		= document.createElement("textarea");
	
	useCustomElement	= true;
	//border			= "1px solid #d8d8d9";
	
	scrollbarColor		= "#98adc8 #eaeaea";

	constructor() {

		//super();
		
		var that = this;
		
		if( this.customElement.addEventListener ) {
			
			this.customElement.addEventListener('keydown', function( e ) {
			
			    if( e.keyCode === 9 ) { 

					var start 		= this.selectionStart;

					var end 		= this.selectionEnd;

					var target 		= e.target;

					var value 		= target.value;

					// set textarea value to: text before caret + tab + text after caret
					target.value = value.substring(0, start)
						    + "	"
						    + value.substring(end);

					// put caret at right position again (add one for the tab)
					this.selectionStart = this.selectionEnd = start + 1;

					// prevent the focus lose
					e.preventDefault();
				
			    }
			    
			}, false );

		}
		
	}
	
	async keyup( event ){
		//console.log("event.target.value", event.target.value);

		this.value = event.target.value;

	}

	setup() {

		var that = this;

		that._useCustomElement = this.useCustomElement;

		this.__defineSetter__( "useCustomElement", function( value ) { 

			that._useCustomElement = value;
			
			that.setupElement( value );

		});

		this.__defineGetter__( "useCustomElement", function( value ){ 
			
			if( typeof that._useCustomElement == "undefined" ) {
			
				that._useCustomElement = false;

				return false;
				
			} else {
			
				return that._useCustomElement;
				
			}
		});


		this.setupElement( this.useCustomElement );

	}

	setupElement( value ) {

		this.customElement.setAttribute( "placeholder", this.placeholder );
		

		if( this.element ) {
		
			var parentNode = this.element.parentNode;
			
			if( this.useCustomElement ) {
			
				if( this.element.tagName != this.customElement.tagName ) {

					parentNode.replaceChild( this.customElement, this.element );
					
					this.element = this.customElement;
				
				}
			
			} else {
			
				if( this.element.tagName != this.defaultElement.tagName ) {
			
					parentNode.replaceChild( this.defaultElement, this.element );
					
					this.element = this.defaultElement;
				
				}
				
			}
			
			this.updateElementContent();
		
		}

		
	}

}