

class CodeModuleColorPicker {
	
	static create() { 
		return new CodeModuleColorPicker();
	}

	constructor() {
		// initialize variables
		
	}

	/**
	 *  called from runtime when Composit Control is generated
	 */
	init(vm) {
		this.vm = vm;
		if (!this.vm) {
			console.log("ListBoxDemoImage1 :init(): vm no available");
			return;
		}
		
		// Bind Instance to Code Module
		// Elements to change
		Object.defineProperty(this,'rectangle',{value: this.vm.__.getChildByName('Rectangle')});
		Object.defineProperty(this,'ellipse',{value: this.vm.__.getChildByName('Ellipse')});
		Object.defineProperty(this,'rectangle2',{value: this.vm.__.getChildByName('Rectangle2')});
		Object.defineProperty(this,'ellipse2',{value: this.vm.__.getChildByName('Ellipse2')});
		Object.defineProperty(this,'text',{value: this.vm.__.getChildByName('Text')});

		// drop down color picker
		Object.defineProperty(this,'ddCircle',{value: this.vm.__.getChildByName('DD_Circle')});
		Object.defineProperty(this,'ddBar',{value: this.vm.__.getChildByName('DD_Bar')});
		Object.defineProperty(this,'ddArea',{value: this.vm.__.getChildByName('DD_Area')});
		Object.defineProperty(this,'ddBarArea',{value: this.vm.__.getChildByName('DD_BarArea')});
		Object.defineProperty(this,'ddGrid',{value: this.vm.__.getChildByName('DD_Grid')});

		// window color picker
		Object.defineProperty(this,'wCircle',{value: this.vm.__.getChildByName('W_Circle')});
		Object.defineProperty(this,'wBar',{value: this.vm.__.getChildByName('W_Bar')});
		Object.defineProperty(this,'wArea',{value: this.vm.__.getChildByName('W_Area')});
		Object.defineProperty(this,'wBarArea',{value: this.vm.__.getChildByName('W_BarArea')});
		Object.defineProperty(this,'wGrid',{value: this.vm.__.getChildByName('W_Grid')});
		
		
		
		// install event listener for element (value-chaned )
		// drop down color picker
		this.ddCircle.domRef.addEventListener('value-changed', (event) => 	{
																				this.onChangeCirclePicker(event);
																			});
		this.ddBar.domRef.addEventListener('value-changed', (event) => 		{
																				this.onChangeBarPicker(event);
																			});
		this.ddArea.domRef.addEventListener('value-changed', (event) => 	{
																				this.onChangeAreaPicker(event);
																			});
		this.ddBarArea.domRef.addEventListener('value-changed', (event) =>	{
																				this.onChangeBarAreaPicker(event);
																			});
		this.ddGrid.domRef.addEventListener('value-changed', (event) => 		{
																				this.onChangeGridPicker(event);
																			});
		// install event listener for element (value-chaned )
		// window color picker
		this.wCircle.domRef.addEventListener('value-changed', (event) => 	{
																				this.onChangeCirclePicker(event);
																			});
		this.wBar.domRef.addEventListener('value-changed', (event) => 		{
																				this.onChangeBarPicker(event);
																			});
		this.wArea.domRef.addEventListener('value-changed', (event) => 	{
																				this.onChangeAreaPicker(event);
																			});
		this.wBarArea.domRef.addEventListener('value-changed', (event) =>	{
																				this.onChangeBarAreaPicker(event);
																			});
		this.wGrid.domRef.addEventListener('value-changed', (event) => 		{
																				this.onChangeGridPicker(event);
																			});
	
		
    }

    onChangeCirclePicker (event) {
		this.rectangle.domRef.style.backgroundColor = this._MakeColorString(this.wCircle.domRef.value);
		this.rectangle.domRef.style.borderColor = this._MakeColorString(this.ddCircle.domRef.value);
		
	}
		
	onChangeBarPicker (event) {
		this.ellipse.domRef.style.backgroundColor = this._MakeColorString(this.wBar.domRef.value);
		this.ellipse.domRef.style.borderColor = this._MakeColorString(this.ddBar.domRef.value);
		
	}
		
	onChangeAreaPicker (event) {
		this.text.domRef.style.color = this._MakeColorString(this.wArea.domRef.value);
		this.text.domRef.style.borderColor = this._MakeColorString(this.ddArea.domRef.value);
		
	}
	
	onChangeBarAreaPicker (event) {
		this.rectangle2.domRef.style.backgroundColor = this._MakeColorString(this.wBarArea.domRef.value);
		this.rectangle2.domRef.style.borderColor = this._MakeColorString(this.ddBarArea.domRef.value);
	}
		
	onChangeGridPicker (event) {
		this.ellipse2.domRef.style.backgroundColor = this._MakeColorString(this.wGrid.domRef.value);
		this.ellipse2.domRef.style.borderColor =this._MakeColorString(this.ddGrid.domRef.value);
		
	}
		
	_MakeColorString(value) {
		let valueString = value.toString(16);
		let colorString = '#' + valueString.padStart(8,'0');;
		return colorString;
	}
	
	
}

// Register the CodeModuleColorPicker for a composite control
window.registerCompositeControlModule('_STD_Tab_UsrInput_ColorPicker', CodeModuleColorPicker.create);




