// Web Components are created by directly extending the HTMLElement 
// which is the base class for all HTML Elements (<p>, <h1>, <div>, etc.)
class WordCount extends HTMLElement {
  constructor() {
    // Web Component setup
    super();
    this.attachShadow({mode: "open"})
    // Initialize a base state
    this.state = {
      count: 0,
      limitReached: false
    }
    // Get the element to observe
    this._boundEl = document.querySelector(this.getAttribute('bind'))
    // Init an empty timeput
    this._timeout = null;
    // Get the delay, defaults to 500ms
    this._delay = parseInt(this.getAttribute('delay')) || 500;
    // A optional character limit
    this._limit = parseInt(this.getAttribute('limit')) || undefined;
    console.log(this._limit)
    // If there is a bound element, attach an event listener
    if (this._boundEl) {
      this._boundEl.addEventListener('keyup', (e) => {
        this._timeout = setTimeout( () => {
          let count = 0;
          // Check if e.target.value is defined 
          if (!!e.target.value) {
            count = e.target.value.split(' ').length;
          } else {
            // If there is no e.target.value try and read the textContent
            count = e.target.textContent.split(' ').length;
          }
          // Update the word count
          this.updateCount(count)
          if(this._limit != undefined) {
            this.updateLimitReached(count);
          }
          clearTimeout(this._timeout);
        }, this._delay)
      })
    }
    this.render(this.state);
  }
  
  CSS() {
    return `
  <style>
    .limit-reached {
      color: var(--word-count--limit-color, red);
    }
  </style>
`;
  }
  
  updateLimitReached(val) {
    this.state.limitReached = parseInt(val) >= parseInt(this._limit) 
    this.render(this.state);
  }
  
  updateCount(val) {
    // Update the state
    this.state.count = val;
    // Re-render the component
    this.render(this.state)
  }
  
  render(state) {
    let className = this.state.limitReached ? 'limit-reached' : '';
    // Update the innerHTML of the Shadow DOM
    this.shadowRoot.innerHTML = `${this.CSS()}<p class="${className}">You typed ${state.count} words</p>`;
  }
}

// Register the custom element. All <word-count> HTML elements will be constructed 
// by using the WordCount Class defined above.
window.customElements.define('word-count', WordCount);