/**
 * Битовые маски в UI
 * Автор: Игорь Алексеенко
 */


// состояния компонентов
class Button {
	constructor() {
		this.state = 
			Button.State.DISABLED | 
			Button.State.HAS_ICON;
		this.element = document.createElement('button');
		this.getClassName();
	}

	getClassName() {
		Object.keys(Button.State).forEach(function(stateName) {
			// 1-ый вариант
			var stateBits = Button.State[stateName];
			var cssClassName = Button.StateClassName[stateBits];
			var action = Boolean(this.state & stateBits) ? 'add' : 'remove';
			this.element.classList[action](cssClassName);

			// 2-ой вариант
			this.element.className = Button.StateClassName[this.state];
		}, this);
	};
}

Button.State = {
	DISABLED: 1,
	FOCUSED: 2,
	HOVERED: 4,
	ACTIVE: 8,
	HAS_ICON: 16
}

Button.StateClassName = {
	'1': 'item-disabled',
	'2': 'item-focused',
	'4': 'item-hovered',
	'8': 'item-active',
	'16': 'item-hasicon'
}

// 2-ой вариант
Button.StateClassName[1 | 16] = 'item-disabled item-hasicon';

// для проверки состояния
Boolean(Button.State[statName] & this.state)



/** 
 * Описание поведения
 */
var Direction = {
	RIGHT: 0x01
};

var DirectionBehaviour = {
	0x01 : function(character) {
	return Object.assign({
		left: character.left + character.hSpeed
		}, character);
	}
]);


/**
 * Redux
 * Можно использовать битовые маски как параметр type для управляющих объектов action. 
 * Так, за одно обращение к хранилищу можно делать несколько операций с данными
 */
const ActionType = {
	UPDATE_1:0x01, 
	UPDATE_2:0x02
};

store.dispatch({
	type: ActionType.UPDATE_1 | ActionType.UPDATE_2
});