import header	 			from './header.js';
import button	 			from './button.js';

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


import permission			from '/user/group/user.group.permission.js';


export default class select extends renderCollection { 

	values					= new Array();

	width					= 200;
	
	layers					= 1;

	customElement			= document.createElement("select");

	useCustomElement 		= true;
	
	editable				= true;

	typedSelect				= false;

	debug					= true;

	#ifdef WINDOWS

		borderBottom			= "2px solid #868686"

		borderRadius			= 6;

		padding					= 8;

		margin					= 12;

		#ifdef LIGHT

			background				= "#F7FAFC";

			border					= "1px solid #E5E5E5";

			opaqueBackgroundColor	= "#F7FAFC";


			focusBackgroundColor	= "white";

			focusBorderBottom		= "2px solid #4CC2FF";


			blurBackgroundColor		= "#F7FAFC";

			blurBorderBottom		= "1px solid #E5E5E5";


		#endif


		#ifdef DARK

			background				= "#2D2D2D!important"

			webkitBoxShadow			= "0 0 0px 30px #2D2D2D inset!important";

			webkitTextFillColor		= "white";

			color					= "white"

			transition				= "background-color 5000s ease-in-out 0s";


			border					= "1px solid #303030";

			borderBottom			= "2px solid #9A9A9A";

			color					= "WHITE";

			opaqueBackgroundColor	= "#2D2D2D!important";


			focusBackgroundColor	= "#1F1F1F";

			focusBorderBottom		= "2px solid #0067C0";


			blurBackgroundColor		= "#fbfbfb";

			blurBorderBottom		= "1px solid #9A9A9A";

	

		#endif
	

	#endif


	constructor( object, collection ) {

		super( object, collection );

		if( collection && collection.type == "collection" ) {

			for (var i = 0; i < collection.rows.length; i++) {

				var row = collection.rows[i];

				this["option" + i] = row;
			}

		}

	}


	
	change() {

		if( this.element.selectedOptions ) {

			var selectedElement	= this.element.selectedOptions[ 0 ];
			
			var selectedID		= parseFloat( selectedElement.value );
			
			this.value			= selectedID;
			
			this.parent.value 	= selectedID;
			
			console.log("selected option", this.parent);
		
		}

		if( this.element.tagName == "SELECT" ) {

			var selectedElement	= this.element.selectedOptions[ 0 ];

			var element 			= this.element;

			var index 				= element.selectedIndex;
			var options 			= element.options;

			var selectedOption 		= options[ index ];
			var selectedOptionValue = selectedOption.value;

			this.value			= selectedOptionValue;
			
			this.parent.value 	= selectedOptionValue;

			console.log( "value is now:", this.value );
		}


		if( this.update ) {

			this.update();
			
		}
		
	
	}
	
	addValue( value ) {
		
		if( !this.values.includes( value ) ) {
		
			this.values.push( value );
		}
		
		this.value = this.values.join(",");
	
	}
	
	removeValue( value ) {
	
		for( var c = 0; c < this.values.length;c++ ) {
		
			if( this.values[c] == value ) {
			
				delete this.values[c];
			
			}
		
		}
		
		this.value = this.values.join(",");
	
	}
	
	valueExists( value ) {
	
		return this.values.includes( value );
	
	}
	


	serverSign( object ) {
		
		this.create();

	}


	permission() {
		
		this.allow( permission.admin, "READ" );

		this.allow( permission.admin, "WRITE" );

	}

	addOption( value, label, selected ) {

		var optionElement		= document.createElement("option")

		optionElement.text 		= label;

		optionElement.id 		= value;

		optionElement.value 	= value;

		if( label == "Select Country" ) {

			optionElement.setAttribute("disabled", "")  

			optionElement.setAttribute("selected", "")  
			

		}

		if( selected ) {

			optionElement.setAttribute( "selected", "" )  

		}

		this.customElement.appendChild( optionElement );

	}

}