var Assistant = require ('./assistant');

module.exports = new Class
({
	Extends: Vn.Component
	,Tag: 'htk-assistant-bar'
	,Properties:
	{
		assistant:
		{
			type: Assistant
			,set: function (x)
			{
				this.link ({_assistant: x}, {'step-change': this.onStepChange});

				var stepCount = x.stepCount;
				var steps = this._steps;

				Vn.Node.removeChilds (steps);
				steps.style.width = (stepCount * 1.7) + 'em';
		
				for (var i = 0; i < stepCount; i++)
				{
					var img = this.createElement ('img');
					img.src = 'image/step.svg';
					img.addEventListener ('click', this.setStep.bind (this, i));
					steps.appendChild (img);
				}

				this.onStepChange ();
			}
			,get: function ()
			{
				return this._assistant;
			}
		}
	}

	,_assistant: null
	,_stepIndex: -1
	
	,render: function ()
	{
		var bar = this.createRoot ('div');
		bar.className = 'htk-assistant-bar';
		
		var previousButton = this.createElement ('button');
		previousButton.className = 'previous';
		previousButton.title = _('Previous');
		previousButton.addEventListener ('click', this.movePrevious.bind (this));
		bar.appendChild (previousButton);

		var icon = this.createElement ('htk-icon');
		icon.icon = 'go-previous';
		previousButton.appendChild (icon.node);
		
		var steps = this.createElement ('div');
		bar.appendChild (steps);
		
		var nextButton = this.createElement ('button');
		nextButton.className = 'next';
		nextButton.title = _('Next');
		nextButton.addEventListener ('click', this.moveNext.bind (this));
		bar.appendChild (nextButton);
		
		var icon = this.createElement ('htk-icon');
		icon.icon = 'go-next';
		nextButton.appendChild (icon.node);
		
		this._steps = steps;
		this._previousButton = previousButton;
		this._nextButton = nextButton;
	}

	,movePrevious: function ()
	{
		if (this._assistant)
			this._assistant.movePrevious ();
	}
	
	,moveNext: function ()
	{
		if (this._assistant)
			this._assistant.moveNext ();
	}
	
	,setStep: function (stepIndex)
	{
		if (this._assistant)
			this._assistant.setStep (stepIndex);
	}

	,onStepChange: function ()
	{
		if (this._assistant)
		{
			var stepIndex = this._assistant.step;
			var stepCount = this._assistant.stepCount;
		}
		else
		{
			var stepIndex = -1;
			var stepCount = 0;
		}

		if (this._stepIndex != -1)
			this._steps.childNodes[this._stepIndex].src = 'image/step.svg';
			
		this._stepIndex = stepIndex;
		
		if (stepIndex != -1)
			this._steps.childNodes[stepIndex].src = 'image/step-cur.svg';

		var visibility = stepIndex <= 0 ? 'hidden' : 'visible';
		this._previousButton.style.visibility = visibility;

		var visibility = stepIndex >= stepCount - 1 ? 'hidden' : 'visible';
		this._nextButton.style.visibility = visibility;
	}
});