import { bindable } from './helpers.js'

// Base class for a Rivets.js component
export default class Component {

	/**
	 * return the HTML selector of the component
	 * @return {string}
	 */
	static selector() { return '' }

	/**
	 * return the HTML template of the component
	 * @return {string}
	 */
	static template() { return '' }

	/**
	 * Called when the component is initialized
	 * @param {element} el - the instantiated DOM element
	 * @param {object} data - the data attributes of the component
	 * @return {Component}
	 */
	static initialize(el, data) {
		return new this(el, data)
	}

	/**
	 * The constructor.
	 * @param {element} el - the instantiated DOM element
	 * @param {object} data - the data attributes of the component
	 */
	constructor(el, data) {

		/**
		 * The DOM element this component is associated with.
		 * @type {element}
		 */
		this.element = el
	}

	/**
	 * Returns the reference to this component.
	 * Useful for passing the whole component along.
	 */
	get self() {
		return this
	}

	/**
	 * Returns a self-binding proxy wrapper for this class.
	 * Useful for passing methods to components.
	 */
	get bind() {
		return bindable(this)
	}
}