class EventBox extends HTMLElement {
	constructor() {
	  super();
	  this.attachShadow({ mode: 'open' });
	  this.shadowRoot.innerHTML = `
	  <style>
	  .outer-container {
		justify-content: center;
		align-items: center;
		padding: 20px;
	  }
	  .container {
		border: 1px solid #ccc;
		padding: 5px 20px 5px 20px;
		background-color: #fff;
		border-radius: 10px;
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
		width:90%;
	  }
	  .select-container {
		margin-bottom: 15px;
	  }
	  .row {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 10px;
	  }
	  .row > * {
		flex: 0 0 calc(50% - 20px); 
		margin-bottom: 15px;
	  }
	  .row:last-child {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	  }
	  label {
		display: block;
		margin-bottom: 1px;
	  }
	  select, input[type="range"], input[type="color"] {
		border: 1px solid #ccc;
		border-radius: 4px;
		width: 100%;
	  }
	  select{
		width: 90%;
		font-size: large;
		height: auto;
	  }
	  input[type="color"] {
		height: 30px;
		padding: 0;
		width: 30px;
	  }
	  .checkbox-container {
		display: flex;
		align-items: center;
		justify-content: left;
	  }
	  .try-button-container {
		display: flex;
		justify-content: right;
		width: 100%;
	  }
	  button {
		background-color: #007bff;
		color: #fff;
		padding: 10px 20px;
		border: none;
		border-radius: 4px;
		cursor: pointer;
	  }
	  .center-text {
		text-align: center;
		font-size: larger;
		font-weight: bold;
	  }
	  input[type="checkbox"] {
		transform: scale(2.5);
		margin-left: 20px;
	  }
	  input[type="checkbox"].css-checkbox + label.css-label  {
		display: inline-block;
		margin-left: 30px;
	  }
	  .label-check{
		margin-left: 10px;
	  }
	</style>
	  <div class="outer-container">
		<div class="container">
		<legend class="center-text" id="center-text">Event0</legend><br>
		<div class="row">
		<div>
			<label for="animation-list" id="list-label">Animations:</label>
			<select id="animation-list">
			</select>
		</div>
		<div>
	  		<hue-select id="hue-selector"></hue-select>
		</div>
		</div>
		<div class="row">
			<div>
				<label for="speed" id="speed-label">Speed:</label>
				<input type="range" id="speed" min="1" max="10">
			</div>
				<div>
					<label for="huerange" id="huerange-label">Hue Range:</label>
					<input type="range" id="huerange" min="0" max="100">
				</div>
			</div>
		<div class="row">
			<div>
				<label for="param1" id="param1-label">Param1:</label>
				<input type="range" id="param1" min="0" max="50">
			</div>
			<div>
				<label for="param2" id="param2-label">Param2:</label>
				<input type="range" id="param2" min="0" max="100">
			</div>
		</div>
		<div class="row">
			<div class="checkbox-container">
				<input type="checkbox" id="check1">
				<label class="label-check" id="check1-label">Check1</label>
			</div>
			<div class="checkbox-container">
				<input type="checkbox" id="check3">
				<label class="label-check" id="check3-label">Check3</label>
			</div>
		</div>
		<div class="row">
			<div class="checkbox-container">
				<input type="checkbox" id="check2">
				<label class="label-check" id="check2-label">Check2</label>
			</div>
			<div class="try-button-container">
				<button id="try-button">Try</button>
			</div>
		</div>
	
	</div>
	</div>
	  `;
		this.Title = this.shadowRoot.querySelector('#center-text');
	  	this.hueSelect = this.shadowRoot.querySelector('#hue-selector');
		this.AnimationList = this.shadowRoot.getElementById('animation-list');
		this.Speed = this.shadowRoot.getElementById('speed');
		this.HueRange = this.shadowRoot.querySelector('#huerange');
		this.Param1 = this.shadowRoot.querySelector('#param1');
		this.Param2 = this.shadowRoot.querySelector('#param2');
		this.Check1 = this.shadowRoot.querySelector('#check1');
		this.Check2 = this.shadowRoot.querySelector('#check2');
		this.Check3 = this.shadowRoot.querySelector('#check3');

		this.AnimationListLabel = this.shadowRoot.querySelector('#list-label');
		this.SpeedLabel = this.shadowRoot.querySelector('#speed-label');
		this.HueRangeLabel = this.shadowRoot.querySelector('#huerange-label');
		this.Param1Label = this.shadowRoot.getElementById('param1-label');
		this.Param2Label = this.shadowRoot.getElementById('param2-label');
		this.Check1Label = this.shadowRoot.getElementById('check1-label');
		this.Check2Label = this.shadowRoot.getElementById('check2-label');
		this.Check3Label = this.shadowRoot.getElementById('check3-label');

	  	this.AnimationPropsJson;

		this.SpeedCaption = "";
		this.HueRangeCaption = "";
		this.Param1Caption = "";
		this.Param2Caption = "";
		this.Check1Caption = "";
		this.Check2Caption = "";
		this.Check3Caption = "";

		this.setSpeedCaption(`Speed: `);
		this.Speed.min = 0;
		this.Speed.max = 100;

		this.setHueRangeCaption(`Hue Range: `);
	  	this.HueRange.min = 0;
		this.HueRange.max = 360;

		this.setParam1Caption(`Param1: `);
	  	this.Param1.min = 0;
		this.Param1.max = 100;

		this.setParam2Caption(`Param2: `);
		this.Param2.min = 0;
		this.Param2.max = 100;

		this.setCheck1Caption(`Check1`);
		this.setCheck2Caption(`Check2`);
		this.setCheck2Caption(`Check3`);

	  	this.Index = 0;

		this.Speed.addEventListener('input', () => { this.updateSpeedLabel(); });
		this.HueRange.addEventListener('input', () => { this.updateHueRangeLabel(); });
		this.Param1.addEventListener('input', () => { this.updateParam1Label(); });
		this.Param2.addEventListener('input', () => { this.updateParam2Label(); });

		this.TryButton = this.shadowRoot.querySelector('#try-button');
		this.TryButton.addEventListener('click', () => {
			this.handleTryButtonClick();
		});

		this.AnimationList.addEventListener('change', this.handleAnimationListChange.bind(this));
	}

	setIndex(i){ this.Index = i; }
	getIndex(){ return this.Index; }
	updateSpeedLabel(){ 
		if(!this.Speed.hidden){
			this.SpeedLabel.innerHTML = this.SpeedCaption + this.getSpeedValue(); 
		}
	}
	updateHueRangeLabel(){ 
		if(!this.HueRange.hidden){
			this.HueRangeLabel.innerHTML = this.HueRangeCaption + this.getHueRangeValue();
		}
	}
	updateParam1Label(){ 
		if(!this.Param1.hidden){
			this.Param1Label.innerHTML =  this.Param1Caption + this.getParam1Value(); 
		}
	}
	updateParam2Label(){ 
		if(!this.Param2.hidden){
			this.Param2Label.innerHTML = this.Param2Caption + this.getParam2Value(); 
		}
	}
	setTitle(text){
		this.Title.textContent = text;
	}
	addOptionToList(value, text){
		const optionElement = document.createElement('option');
		optionElement.value = value;
		optionElement.textContent = text;
		this.AnimationList.appendChild(optionElement);
	}
	setHidden(hidden){ this.hidden = hidden; }
	getHidden(){ return this.hidden; }
	setHueValue(value){ this.hueSelect.setHue(value); }
	getHueValue(){ return this.hueSelect.getSelectedHue(); }	
	setSpeedValue(value){
		this.Speed.value = value;
		this.updateSpeedLabel();
	}
	setSpeedCaption(caption){
		let hid = false;
		if(caption.trim() === ""){
			hid = true;
		}
		this.SpeedCaption = caption;
		this.SpeedLabel.innerHTML = caption;
		this.Speed.hidden = hid;
		this.SpeedLabel.hidden = hid;
	}
	getSpeedValue(){ return this.Speed.value; }
	setHueRangeValue(value){
		this.HueRange.value = value;
		this.updateHueRangeLabel()
	}
	setHueRangeCaption(caption){
		let hid = false;
		if(caption.trim() === ""){
			hid = true;
		}
		this.HueRangeCaption = caption;
		this.HueRangeLabel.innerHTML = caption;
		this.HueRange.hidden = hid;
		this.HueRangeLabel.hidden = hid;
	}
	getHueRangeValue(){ return this.HueRange.value; }
	setParam1Value(value){
		this.Param1.value = value;
		this.updateParam1Label()
	}
	setParam1Caption(caption){
		let hid = false;
		if(caption.trim() === ""){
			hid = true;
		}
		this.Param1Caption = caption;
		this.Param1Label.innerHTML = caption;
		this.Param1.hidden = hid;
		this.Param1Label.hidden = hid;
	}
	getParam1Value(){ return this.Param1.value; }
	setParam2Value(value){
		this.Param2.value = value;
		this.updateParam2Label()
	}
	setParam2Caption(caption){
		let hid = false;
		if(caption.trim() === ""){
			hid = true;
		}
		this.Param2Caption = caption;
		this.Param2Label.innerHTML = caption;
		this.Param2.hidden = hid;
		this.Param2Label.hidden = hid;
	}
	getParam2Value(){ return this.Param2.value; }

	setCheck1Value(value){ this.Check1.checked = value; }
	setCheck1Caption(caption){
		let hid = false;
		if(caption.trim() === ""){
			hid = true;
		}
		this.Check1Label.innerHTML = caption;
		this.Check1.hidden = hid;
		this.Check1Label.hidden = hid;
	}
	getCheck1Value(){ return this.Check1.checked; }

	setCheck2Value(value){ this.Check2.checked = value; }
	setCheck2Caption(caption){
		let hid = false;
		if(caption.trim() === ""){
			hid = true;
		}
		this.Check2Label.innerHTML = caption;
		this.Check2.hidden = hid;
		this.Check2Label.hidden = hid;
	}
	getCheck2Value(){ return this.Check2.checked; }

	setCheck3Value(value){ this.Check3.checked = value; }
	setCheck3Caption(caption){
		let hid = false;
		if(caption.trim() === ""){
			hid = true;
		}
		this.Check3Label.innerHTML = caption;
		this.Check3.hidden = hid;
		this.Check3Label.hidden = hid;
	}
	getCheck3Value(){ return this.Check3.checked; }

	setAnimationIndex(index){
		this.AnimationList.selectedIndex = index; 
		const changeEvent = new Event('change');
		this.AnimationList.dispatchEvent(changeEvent);
	}
	getAnimationIndex(){ 
		return this.AnimationList.selectedIndex; 
	}

	handleTryButtonClick() {
		const eventIndexValue = this.getIndex();
		const animIndexValue = this.getAnimationIndex();
		const hueValue = this.getHueValue();
		const speedValue = this.getSpeedValue();
		const colorRangeValue = this.getHueRangeValue();
		const param1Value = this.getParam1Value();
		const param2Value = this.getParam2Value();
		const check1Value = this.getCheck1Value();
		const check2Value = this.getCheck2Value();
		const check3Value = this.getCheck3Value();

		this.dispatchEvent(new CustomEvent('tryClick', {
			detail: {
				eventIndex: eventIndexValue,
				animIndex: animIndexValue,
				hue: hueValue,
				speed: speedValue,
				colorRange: colorRangeValue,
				param1: param1Value,
				param2: param2Value,
				check1: check1Value,
				check2: check2Value,
				check3: check2Value
			}
		}));
	}

	setAnimationCaptions(propsJson){
		this.AnimationPropsJson = propsJson;

		//add options to list
		let x = 0;
		this.AnimationPropsJson.forEach(props => {
			this.addOptionToList(x, props.name);
			x++;
		});

	}

	handleAnimationListChange(){
		const selectedIndex = this.getAnimationIndex();
		const selectedProps = this.AnimationPropsJson[selectedIndex];

		this.updateControlProps(selectedProps);
	}

	updateControlProps(props){
		this.setSpeedCaption(props.speed);
		let s = props['hue-range'];
		this.setHueRangeCaption(s || "");
		this.setParam1Caption(props.param1 || "");
		this.setParam2Caption(props.param2 || "");
		this.setCheck1Caption(props.check1 || "");
		this.setCheck2Caption(props.check2 || "");
		this.setCheck3Caption(props.check3 || "");
		
		this.updateSpeedLabel(); 
		this.updateHueRangeLabel(); 
		this.updateParam1Label(); 
		this.updateParam2Label(); 
	}

}
  
customElements.define('event-box', EventBox);