const MAX_CHAR_COUNT = 140;
const text = document.getElementById('string');
const charCountDisplay = document.getElementById('chars-left');
const btn = document.getElementById('btn');
const tweets = document.getElementById('tweets-container');
let currTweet = "";

/**
 * Update UI based on characters left
 */
function handleKeyDown(e){
    // update character count
    const charsLeft = MAX_CHAR_COUNT - e.target.value.length;
    currTweet = e.target.value;

    // update count on UI
    charCountDisplay.innerHTML = charsLeft;

    // if num chars exceeds maximum, change to red and disable tweet button
    if (charsLeft <= 20) {
        charCountDisplay.classList.add("exceeded-count");
    } else {
        charCountDisplay.classList.remove("exceeded-count");
    }
    
    // disable tweet button if exceeded max chars
    if (charsLeft < 0) {
        btn.classList.add("buttonDisabled");
        btn.disabled = true;
    } else {
        btn.classList.remove("buttonDisabled");
        btn.disabled = false;
    }
}

/**
 * Add tweet to list of tweets
 */
function handleClick() {
        
    // create div with tweet
    const newTweet = document.createElement("p")
    newTweet.classList.add('tweet');
    newTweet.innerHTML = currTweet;
    tweets.appendChild(newTweet);
    
    // reset tweet box
    text.value = "";
    charCountDisplay.classList.remove("exceeded-count");
    charCountDisplay.innerHTML = MAX_CHAR_COUNT;
    text.focus();
}

text.addEventListener("keyup", handleKeyDown);

btn.addEventListener("click", handleClick);