console.clear();

/**
 * Defines the <my-accordion> element
 */
class myAccordion extends HTMLElement {
  constructor() {
    super();
    this.addEventListener("accordionOpen", this.onAccordionOpen.bind(this));
  }

  /**
   * Catches the accordionOpen event to toggle other accordions closed
   */
  onAccordionOpen(event) {
    const items = Array.from(this.querySelectorAll("my-accordion-item"));

    const itemsToClose = items.filter((item) => item !== event.detail.item);

    itemsToClose.forEach((item) => {
      item.toggleState(false);
    });
  }
}

/**
 * Defines the <my-accordion-item> element
 */
class myAccordionItem extends HTMLElement {
  /**
   * Required to build the new element in the DOM
   */
  constructor() {
    super();

    // Get template to seed the shadowRoot.
    const template = document.querySelector(
      'template[data-component="my-accordion-item"]'
    );

    // Creates a shadowroot, injects template contents
    const root = this.attachShadow({
      mode: "open"
    });
    root.appendChild(template.content.cloneNode(true));

    // Store references to internal components
    this.heading = root.querySelector("button h2");
    this.content = root.querySelector(".accordion-content");

    // Wire up internal logic
    root
      .querySelector("button")
      .addEventListener("click", this.clickHandler.bind(this));

    // Set initial state
    this.open = this.hasAttribute("open") ? true : false;
    this.toggleState(this.open);

    this.heading.innerText = this.getAttribute("title");
  }

  /**
   * Toggles the open state of the accordion item.
   * If an argument is provided, it acts as a one-way toggle.
   */
  toggleState(forceState) {
    const toState = forceState !== undefined ? Boolean(forceState) : !this.open;

    this.open = toState;
    this.content.classList.toggle("accordion-content--open", toState);

    if (this.open) {
      this.setAttribute("open", "");
    } else {
      this.removeAttribute("open");
    }
  }

  /**
   * Toggles this accordion item and dispatches an event to
   * the accordion wrapper to close other items.
   */
  clickHandler(event) {
    this.toggleState();

    const toggleEvent = new CustomEvent("accordionOpen", {
      bubbles: true,
      cancelable: true,
      composed: true,
      detail: {
        item: this,
        open: this.open
      }
    });

    this.dispatchEvent(toggleEvent);
  }

  /**
   * Callback anytime an attribute changes
   * Only triggered if attribute is in list of this.observedAttributes
   */
  attributeChangedCallback(name, oldValue, newValue) {
    if (name === "title") {
      this.heading.innerText = newValue;
    }
  }

  /**
   * List of attributes to respond to with attributeChangedCallback
   */
  static get observedAttributes() {
    return ["title", "open"];
  }
}

/**
 * Define our custom elements in the registry
 *
 * https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define
 */
customElements.define("my-accordion", myAccordion);
customElements.define("my-accordion-item", myAccordionItem);