import getId from "./id.js";

export function pureComponentFactory (name, propNames, functionalRender) {
  class ComponentClass extends HTMLElement  {
    constructor (...args) {
      super(...args);
      this.attachShadow({mode: 'open'});
      this.identifier = getId(name);
      return;
    }
    render(args) {
      let newDom = functionalRender(args);
      this.shadowRoot.innerHTML= newDom;
    }
    static get observedAttributes() {
      //How do we make this flexible????
      return propNames;
    }
    connectedCallback() {
      this.render(this.parseAttributes())
    }
    attributeChangedCallback() {
      this.render(this.parseAttributes())
    }
    parseAttributes() {
      let attr = {};
      for(let i = 0; i < this.attributes.length; ++i) {
        attr[this.attributes[i].name] = this.getAttribute(this.attributes[i].name); 
      }
      return attr;
    }

  }
  window.customElements.define(name, ComponentClass);
  return ComponentClass;
}