// Prepare a <template> for upgrading our baseline HTML
let template = document.createElement("template");
template.innerHTML = `
  <style>[data-content] { margin-top: 1em; }</style> <!-- scoped styles! -->
  <button aria-expanded="false" data-trigger>Show/hide content</button>
  <div hidden data-content><slot></slot></div>
`;

// Our custom element class
export class DisclosureWidget extends HTMLElement {
  constructor() {
    super();

    // Attach a shadow root to the element.
    // This is better (perf, expectations) than via innerHTML.
    let shadowRoot = this.attachShadow({ mode: "open" });

    // Use our template as Shadow DOM
    shadowRoot.appendChild(template.content.cloneNode(true));
  }

  connectedCallback() {
    // Add the trigger button text and
    // prepare toggle functionality
    const trigger = document
      .querySelector("disclosure-widget")
      .shadowRoot.querySelector("[data-trigger]");
    trigger.textContent = `Show/hide ${this.getAttribute("label")}`;
    trigger.addEventListener("click", this.toggle);
  }

  toggle() {
    let expanded = this.getAttribute("aria-expanded") === "true" || false;
    this.setAttribute("aria-expanded", !expanded);
    let content = this.nextElementSibling;
    content.hidden = !content.hidden;
  }

  disconnectedCallback() {
    console.log("disconnected!");
  }
}

window.customElements.define("disclosure-widget", DisclosureWidget);