/**
 * tags.js
 * animate/change background when checkbox is checked
 *
 */
import ElementHelpers from '../helpers/element-helpers';

/**
 * Declare constants
 */
const attributeBase = 'data-rs-tags';

export class Tags {

	constructor(element) {
		this.element = element;
		this.checkbox = ElementHelpers.getElementByAttributeWithinElement(this.element, this.attributes.checkbox);
		this.tagRemove = ElementHelpers.getElementByAttributeWithinElement(this.element, this.attributes.remove);
		this.addEventHandlers();
	}

	/**
	 * Declare attribute constants
	 */
	get attributes() {
		return {
			checkbox: `${attributeBase}-checkbox`,
			remove: `${attributeBase}-remove`
		}
	}

	/**
	 * Declare classes
	 */
	get classes() {
		return {
			checkedBackgroundColor: 'tag__checked-background-color',
			hideTag: 'hide-tag'
		}
	}

	/**
	 * Add event handlers
	 */
	addEventHandlers() {
		this.tagRemove && this.tagRemove.addEventListener('click', () => {
			this.element.classList.add(this.classes.hideTag);
		});
		this.checkbox && this.checkbox.addEventListener('change', (event) => {
			if (event.target.checked) {
				// Checkbox is checked
				this.element.classList.add(this.classes.checkedBackgroundColor);
			} else {
				this.element.classList.remove(this.classes.checkedBackgroundColor);
			}
		});

	}

	/**
	 * Get selector
	 */
	static getSelector() {
		return `[${attributeBase}]`;
	}
}
