var XElements = require("x-elements");

class MyComponent extends XElements { 
  constructor() {
    super();
  }

  /* 
    This is same as native webcomponents 
  */
  static get observedAttributes() {
    return ["status"];
  }
  
  /* 
    This works similarly to observedAttributes, but
    objects and arrays can be assigned directly without
    the need to JSON encode/decode or set up a bunch of 
    getters and setters.

    This will just work

    myComponent.user = {
      first_name: "John", 
      last_name: "Doe"
      ...
    }
  */
  static get observedProperties() {
    return ["user"];
  }

  /*
    
   */
  connectedCallback() { 
    /*
      shadowDOM is turned off by default, more on that later
      this.__useShadow__ = true 
    */
    
    /*
      Calling __connect__ to attach your template to the component
     */
    this.__connect__("my-component")
  }

  firstConnected() {
    /*
      This method is called once after your component is attached 
      to the DOM and fully loaded. Do any setup or attaching event
      listeners here
     */
  }

  onUser(newValue, oldValue) {
    /*
      the attributeChangedCallback is still available in XElements
      but each observed property or attribute also has a 'onProperty'
      method, so you don't need to handle everything in a huge switch 
      or if/else statement. 

      Additionally, these methods will be called once after the firstConnected
      callback
     */
    
    /*
      A simple method for firing a custom event. The first argument is the 
      event name and the second is the data which will be accessible in the 
      standard 'event.detail' data
     */ 
    this.fire("updated", this.user)
  }

  on(propertyName, newValue, oldValue) {
    /*
      A catch all, shorthand for attributeChangedCallback
     */
  }
}

customElements.define('my-component', MyComponent);
module.exports = Auth;