import { LitElement, css, html } from "https://cdn.skypack.dev/lit";
import {
  customElement,
  property
} from "https://cdn.skypack.dev/lit/decorators.js";
import { classMap } from "https://cdn.skypack.dev/lit/directives/class-map.js";

@customElement("my-accordion")
export class MyAccordion extends LitElement {
  // Render the UI as a function of component state

  connectedCallback() {
    const { handleAccordionToggle } = this;
    super.connectedCallback();

    this.addEventListener("accordionToggle", handleAccordionToggle);
  }

  private handleAccordionToggle(event) {
    const { item: toggledItem, status: toggledItemStatus } = event.detail;

    if (toggledItemStatus) {
      Array.from(this.querySelectorAll("my-accordion-item"))
        .filter((item) => item !== toggledItem)
        .forEach((item) => {
          item.open = false;
        });
    }
  }

  render() {
    return html`
      <slot></slot>
    `;
  }
}

@customElement("my-accordion-item")
export class MyAccordionItem extends LitElement {
  @property({ attribute: "title", reflect: true })
  title?: string;

  @property()
  open: boolean = false;

  private clickHandler(event) {
    this.open = !this.open;

    const accordionToggleEvent = new CustomEvent("accordionToggle", {
      bubbles: true,
      cancelable: false,
      composed: true,
      detail: {
        item: this,
        status: this.open
      }
    });

    this.dispatchEvent(accordionToggleEvent);
  }

  render() {
    const { title, open } = this;

    const classes = {
      "accordion-content": true,
      "accordion-content--open": open
    };

    return html`
      <button @click=${this.clickHandler}>
        <h2>${title}</h2>
        <slot name="icon"></slot>
      </button>

      <div class="${classMap(classes)}">
        <slot></slot>
      </div>
    `;
  }

  static styles = css`
    button {
      display: flex;
      width: 100%;
      justify-content: space-between;
      align-items: center;
    }

    .accordion-content {
      display: none;
    }

    .accordion-content--open {
      display: block;
    }

    ::slotted([slot="icon"]) {
      width: 30px;
      height: 30px;
    }
  `;
}