class DueuiBabyStepWidget extends DueuiPanel {
	constructor(config, parent){
		super($.extend(true,
		{
			"skip_population": true,
			"initial_step": 0,
			"style": {"border": "0px", "display": "flex", "flex-direction": config.direction ? config.direction : "row"},
			"step_change_event": "babystep_step",
			"mode_change_event": "babystep_mode",
			"babystep_command": "M290 R${mode} S${step}",
			"element_defaults": config.button_defaults
		}, config), parent);
		var _this = this;
		this.current_step = 0;
		this.current_mode = 0;
		this.steps = this.values.length;
		this.value_count = this.values[this.current_step].length;

		for (let ix = 0; ix < this.value_count; ix++) {
			let val = this.values[this.current_step][ix];
			this.element_configs.push({
				"value": `${val}`,
				"type": "button",
				"is_value": true,
				"style": {"position": "relative"},
				"read_only": ((typeof(val) === 'string') || (typeof(val) === 'number' && val === 99)),
				"val": function(val) {
					if (typeof(val) === 'undefined') {
						let step = _this.values[_this.current_step][ix];
						let mode = _this.current_mode;
						let gc = eval("`" + _this.babystep_command + "`");
						console.log(gc);
						return gc;
					} else {
						this.value_object[this.value_function](val);
					}
				},
				"actions": [{"type": "gcode", "gcode": "${value}", "get_reply": true, "no_echo": true}]
			});
		}
		this.populate();

		if (this.step_change_event) {
			this.jq.on(this.step_change_event, (ea, data, event) => {
				this.toggleStep();
			});
		}

		if (this.mode_change_event) {
			this.jq.on(this.mode_change_event, (ea, data, event) => {
				console.log(`mode ${data}`);
				this.current_mode = data;
			});
		}
	}
	toggleStep() {
		console.log(`Toggle step`);
		if (++this.current_step>= this.steps) {
			this.current_step = 0;
		}
		this.jq.children().each((ix, b) => {
			b.innerHTML = this.values[this.current_step][ix];
		});
	}
}
DueuiElement.addElementType('babystep', DueuiBabyStepWidget);