import Component from '@ember/component';

const INVALID_ATTRS = ['tagName'];

function parseEvent(attr) {
	const match = attr.match(/^on-([\w-]+)/);

	return match && match[1];
}

export default Component.extend({

	didReceiveAttrs() {
		this._super();

		this._parseAttrs();
	},

	didInsertElement() {
		this._super();

		this._addEventListeners();
	},

	_parseAttrs() {
		const bindings = [];
		const events = {};

		Object.entries(this.attrs).forEach(([key, value]) => {
			if (INVALID_ATTRS.includes(key)) {
				return;
			}

			const event = parseEvent(key);

			if (event) {
				events[event] = value;
			} else {
				bindings.push(key);
			}
		});

		this.set('attributeBindings', bindings);
		this.set('eventBindings', events);
	},

	_addEventListeners() {
		const events = this.get('eventBindings');
		const element = this.element;

		Object.entries(events).forEach(([key, value]) => {
			element.addEventListener(key, value);
		});
	}

}).reopenClass({
	positionalParams: ['tagName']
});