class TextField {
    constructor(TextFieldElement) {
        if(TextFieldElement === undefined || TextFieldElement.tagName !== "DIV") {
            console.error('TextFieldElement:constructor Missing the expected div element that represents the TextFieldElement attribute wrapper.'); return;
        }

        this.TextFieldElement = TextFieldElement
        this.textAreaField = TextFieldElement.querySelector('input[type="text"], textarea')
        this.amountSpan = TextFieldElement.querySelector('.word-amount')
        this.maxWords = TextFieldElement.querySelector('.text-field-word-counter').getAttribute('data-max-words')
        this.minWords = TextFieldElement.querySelector('.text-field-word-counter').getAttribute('data-min-words')

        let textAreaLength = this.textAreaField.value.length

        this.amountSpan.innerText = String(textAreaLength)

        if (textAreaLength > parseInt(this.maxWords)) {
            TextFieldElement.classList.add('too-many')
        }

        if (this.minWords && textAreaLength < parseInt(this.minWords)) {
            TextFieldElement.classList.add('too-few')
        }

        this.countString()
        this.enableEventListeners()
    }

    enableEventListeners() {
        this.textAreaField.addEventListener('input', this.countString.bind(this));
    }

    countString() {
        let textAreaLength = this.textAreaField.value.length
        this.amountSpan.innerText = String(textAreaLength)

        if (textAreaLength > parseInt(this.maxWords)) {
            this.TextFieldElement.classList.add('too-many')
        } else {
            this.TextFieldElement.classList.remove('too-many')
        }

        if (this.minWords && textAreaLength < parseInt(this.minWords)) {
            this.TextFieldElement.classList.add('too-few')
        } else {
            this.TextFieldElement.classList.remove('too-few')

        }
    }
}