/*
DESCRIPTION:
We are making a Social Media Character Counter! We want to display the available characters LEFT.
Using the Keydown event should help you here. When the characters reach 20 and below, we want them to turn red. So we will use Javascript to add that styling to it. If the characters drop below 0, we want the button to be disabled BUT if there are only 0 characters left, we should still be able to tweet.
*/
//get HTML elements we want for this interaction
const charCount = document.getElementById('counterFooter');
const messageInput = document.getElementById('string');
const tweetBtn = document.getElementById('btn');

//some helper variables for calculations
const charsAllowed = 140;

messageInput.addEventListener("input", ()=> validateLength());
function validateLength(){
    let charsRemaining = charsAllowed - messageInput.value.length;
    //each time reset styles...this might be more efficient, but I kept finding I needed to repeat these declarations..
    charCount.classList.remove('char-limit');
    tweetBtn.classList.remove('buttonDisabled');
    tweetBtn.disabled = false;
    
    //check the condition of remaining characters and apply styles if needed
    if (charsRemaining <= 20){
        charCount.classList.add('char-limit');
    }
    if( charsRemaining < 0){
        charCount.classList.add('char-limit');
        tweetBtn.classList.add('buttonDisabled');
        tweetBtn.disabled = true;
    }
    
    //Update text    
    charCount.innerText = charsRemaining + "/140";
    
}
//TODO
//function to actually send a tweet when button pressed. Optional, stretch or do later
//test text asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf