var RadioGroup = require('./radio-group');

module.exports = new Class({
	Extends: Htk.Field
	,Tag: 'htk-radio'
	,Properties: {
		tip: {
			type: String
			,set: function(x) {
				if (x)
					this.node.title = _(x);
			}
		},
		val: {
			type: String
			,get: function() {
				return this._val;
			}
			,set: function(x) {
				this._val = x;
				this.node.value = !x ? '' : x;
				this._onRadioGroupChange();
			}
		},
		name: {
			type: String
			,get: function() {
				return this.node.name;
			}
			,set: function(x) {
				this.node.name = x;
			}
		},
		radioGroup: {
			type: RadioGroup
			,get: function() {
				return this._radioGroup;
			}
			,set: function(x) {
				if (this._radioGroup)
					this._radioGroup.removeButton(this);

				this.link({_radioGroup: x}, {'changed': this._onRadioGroupChange});
				this.node.name = x.name;
				x.buttons.push(this);
				this._onRadioGroupChange();
			}
		}
	}
	
	,_radioGroup: null

	,render: function() {
		var radio = Vn.Browser.createRadio('', this.doc);
		radio.checked = false;
		radio.addEventListener('change', this._onChange.bind(this));
		this._node = radio;
	}

	,_onChange: function() {
		console.log(this._val);
		if (this.node.checked && this._radioGroup)
			this._radioGroup.value = this._val || this.value;
	}
	
	,_onRadioGroupChange: function() {
		const value = this._radioGroup.value;
		this.node.checked =
			value && (value == this._val || value == this.value);
	}

	,putValue: function(value) {
		if (!value)
			this.node.value = '';
		else
			this.node.value = value;
	}

	,setEditable: function(editable) {
		this.node.disabled = !editable;
	}
});