import {prepareForRender} from "./store.js";
import getId from "./id.js";

export function hookComponentFactory(name, propNames, hookRender) {
  class ComponentClass extends HTMLElement {
    constructor (...args) {
      super(...args);
      this.attachShadow({mode: 'open'});
      this.identifier = getId(name);
      this.domRender = hookRender.bind(this);
      return;
    }
    render(args) {
      prepareForRender(this.identifier, () => this.attributeChangedCallback());
      let newDom = this.domRender(args, this);
      this.shadowRoot.innerHTML= newDom;
    }
    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;
}