import option 							from '/elements/option.js';

import selectCollection					from '/elements/selectCollection.js';

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

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

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

var id = 0;

export default class selectRenderCollection extends renderCollection {

	customElement 			= document.createElement("select");

	useCustomElement		= true;




	boxMarginLeft				= "auto";

	border;

	shadow;

	#ifdef MACOS

		margin					= 12;

		webkitAppearance		= "none";

		boxWidth				= "20%";

		//opacity					= "20%";

		background	= "none";

		border		= "none";

		fontWeight	= "bold";

		outline		= "none";

		boxShadow	= "none";

		margin		= 10;


		#ifdef LIGHT




		#endif


		#ifdef DARK

			color		= "white";

			background	= "#2a2525f5";

		#endif
	

	#endif


	#ifdef WINDOWS

		padding				= "6px 12px";

		height				= "fit-content";

		margin				= 12;

		borderRadius		= 6;

		border				= "none";

		#ifdef LIGHT

			background		= "#F7FAFC";

		#endif

		#ifdef DARK

			color		= "white";

			background	= "#36373a";

		#endif

		borderRadius	= 2;


	#endif

	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 );

	}

	removeErrorMessages() {

		var errorBlocks = document.querySelectorAll(".errorBlock");

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

			errorBlocks[i].remove();

		}

	}

	showError( text ) {

		this.removeErrorMessages();

		var errorBlock	= document.createElement("div");

		errorBlock.innerText	= text;

		errorBlock.className	= "errorBlock";

		this.boxElement.appendChild( errorBlock );

	}

	focus() {

		var selectedIndex	= this.customElement.selectedIndex;

		this.hightlight( selectedIndex )



		this.customElement.focus();
		
	}

	permission( object ) {

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

		this.allow( groups.admin , "READ" );

	}

}