const template = document.createElement("template");

template.innerHTML = `

<span part="wrapper">
  <button part="decrement control" tabindex="-1" aria-hidden="true">&minus;</button>
  <slot>REPLACE ME</slot>
  <button part="increment control" tabindex="-1" aria-hidden="true">+</button>
<span>
`;

class MyStepper extends HTMLElement {
  static validateElement(el) {
    if (notNumberInput(el)) throw new Error('Must be an input of type number!');
  }
  
  constructor() {
    super();
    
    this.attachShadow({ mode: "open" });
    this.shadowRoot.appendChild(template.content.cloneNode(true));
  }
  
  connectedCallback() {
    if (this.isConnected) {
      this.increment = this.increment.bind(this);
      this.decrement = this.decrement.bind(this);
      this.shadowRoot.querySelector("[part*=decrement]").addEventListener('click', this.decrement);
      this.shadowRoot.querySelector("[part*=increment]").addEventListener('click', this.increment);
    }
  }
  
  disconnectedCallback() {
    this.shadowRoot.querySelector("[part*=decrement]").removeEventListener('click', this.decrement);
    this.shadowRoot.querySelector("[part*=increment]").removeEventListener('click', this.increment);
  }
  
  increment(event) {
    if (this.firstElementChild) {
      this.firstElementChild.stepUp();
    }
  }
  
  decrement(event) {
    if (this.firstElementChild) {
      this.firstElementChild.stepDown();
    }
  }
}

customElements.define("my-stepper", MyStepper);

function notNumberInput(el) {
  return !(el instanceof HTMLInputElement && el.type === "number");
}

document.querySelectorAll("[data-is]").forEach((el) => {
  const cEl = el.dataset.is;
  delete el.dataset.is;

  if (cEl) {
    const CElement = customElements.get(cEl);
    CElement.validateElement?.(el);
    const cElInstance = new CElement();
    el.after(cElInstance);
    cElInstance.append(el);
  }
});

// form stuff here
const form = document.getElementById("quantity-form");

form.addEventListener("submit", function (event) {
  event.preventDefault();

  const data = new FormData(form);
  const entryObj = {};
  const reportDiv = document.getElementById('report')

  for (const [key, value] of data.entries()) {
    entryObj[key] = value;
  }
  
  reportDiv.textContent = JSON.stringify(entryObj, null, 2);
});