/**
 * character-count.js
 * Script to count characters on input field and at styling to it
 */

import ElementHelpers from '../helpers/element-helpers';

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

export class CharacterCounter {

	constructor(element) {
		this.element = element;
		this.counterOutput = ElementHelpers.getElementByAttribute(this.attributes.output, this.element.getAttribute(attributeBase));
		this.maxLength = this.element.getAttribute(this.attributes.maxLength);
		this.setCounterOutput();
		this.addEventHandlers();
	}

	/**
	* Declare attribute constants
	*/
	get attributes() {
		return {
			output: `${attributeBase}-output`,
			maxLength: `${attributeBase}-maxlength`
		}
	}

	/**
	* Declare classes
	*/
	get classes() {
		return {
			textNegative: 'text--negative'
		}
	}

	/**
	 * Add event handlers
	 */
	addEventHandlers() {
		this.element.addEventListener('input', () => {
			this.setCounterOutput();
		});
	}

	/**
	 * Set counter output
	 */
	setCounterOutput() {
		if (this.counterOutput) {
			const characterCount = this.maxLength - this.element.value.length;
			if (characterCount >= 0) {
				this.counterOutput.classList.remove(this.classes.textNegative);
				this.counterOutput.innerText = `${characterCount} characters left`;
			}
			else {
				this.counterOutput.classList.add(this.classes.textNegative);
				this.counterOutput.innerText = `${characterCount} characters`;
			}
		}
	}

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