// Loads the assets/components into the Rivets.js framework
export default class Loader {
	constructor({ components }) {
		this.components = components
		this.state = {}
	}

	// Prepare the Rivets.js framework by loading component definitions
	initialize() {
		for ( const key in this.components ) {
			if ( !this.components.hasOwnProperty(key) ) continue
			const component = this.components[key]

			// Register the component class with the rivets framework
			rivets.components[component.selector()] = {
				template: () => {
					return component.template()
				},

				initialize: (el, data) => {
					return new component(el, data)
				}
			}
		}

		// Load the custom property binders
		this._init_binders()
	}

	_init_binders() {
		// Binds to the CSS background property
		rivets.binders.background = (el, value) => {
			el.style.background = value;
		}
	}

	// Bind the Rivets.js application to the specified target
	bind(target) {
		rivets.bind(document.querySelector(target), this.state)
	}
}