// Mockup https://www.figma.com/design/zsq2ahat30acTnumyy9aqC/00.Small-System?node-id=1132-25632&m=dev
import {
  LitElement,
  type TemplateResult,
  css,
  html,
  nothing,
  unsafeCSS,
} from "lit";
import { customElement, property } from "lit/decorators.js";

import "~icons/heroicons-outline/chevron-right";

import VerticalAccordionStyle from "@styles/forms/searchbar/ui/tems-vertical-accordion.scss?inline";

export type TemsVerticalAccordionProps = {
  label?: string;
  icon?: TemplateResult;
  open: boolean;
};

@customElement("tems-vertical-accordion")
export class TemsVerticalAccordion extends LitElement {
  static styles = css`
    ${unsafeCSS(VerticalAccordionStyle)}
  `;

  @property({ attribute: "label", type: String, reflect: true })
  label: TemsVerticalAccordionProps["label"];

  @property({ attribute: false })
  icon: TemsVerticalAccordionProps["icon"];

  @property({ attribute: "open", type: Boolean, reflect: true })
  open: TemsVerticalAccordionProps["open"] = false;

  _handleClickEvent(e: Event) {
    e.preventDefault();
    this.open = !this.open;
    this.dispatchEvent(new CustomEvent(this.open ? "opened" : "closed"));
  }

  render() {
    // Open/closed placed on label in order to appy css on chevron and slottedElements
    return html`<label class="accordion" open="${this.open || nothing}">
      <button @click=${this._handleClickEvent}>
        <span class="icon"
          >${
            this.icon ? html`${this.icon}` : html`<slot name="icon"></slot>`
          }</span
        >
        ${this.label}
        <icon-heroicons-outline-chevron-right></icon-heroicons-outline-chevron-right>
      </button>
      ${
        this.open
          ? html`<div>
            <slot></slot>
          </div>`
          : nothing
      }
    </label>`;
  }
}