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

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

import SidebarSectionStyle from "@styles/navbar/ui/tems-sidebar-section.scss?inline";

export type TemsSidebarSectionProps = {
  closed: boolean;
};

@customElement("tems-sidebar-section")
export class TemsSidebarSection extends LitElement {
  static styles = css`
    ${unsafeCSS(SidebarSectionStyle)}
  `;

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

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

  render() {
    return html`<label closed="${this.closed || nothing}">
      <button @click=${this._handleClickEvent}>
        <slot name="label"></slot>
        <icon-heroicons-outline-chevron-right></icon-heroicons-outline-chevron-right>
      </button>
      ${
        this.closed
          ? nothing
          : html`<div>
            <slot></slot>
          </div>`
      }
    </label>`;
  }
}