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

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

import ComponentStyle from "@styles/buttons/tems-dropdown.scss?inline";

export type TemsDropdownProps = {
  open: boolean;
  label?: string;
  button: Element;
};

@customElement("tems-dropdown")
export class TemsDropdown extends LitElement {
  static styles = css`
    ${unsafeCSS(ComponentStyle)}
  `;

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

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

  @property({ type: Element })
  button: TemsDropdownProps["button"] = document.createElement("tems-button");

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

  _updateOpenedStatus(e: Event) {
    e.preventDefault();
    this.open = e.target?.open;
  }

  protected firstUpdated() {
    this.button.type = "outline-gray";
    this.button.iconRight = html`<icon-heroicons-outline-chevron-down></icon-heroicons-outline-chevron-down>`;
    this.button.addEventListener("clicked", this._handleClickEvent.bind(this));
  }

  protected updated() {
    this.button.label = this.label;
  }

  render() {
    // this width is wild
    const minWidth = (this.label?.trim().length || 1) * 10 + 64;

    return html`<details
      open=${this.open === true || nothing}
      @toggle=${this._updateOpenedStatus}
    >
      <summary>${this.button}</summary>
      <div style="min-width: ${minWidth}px">
        <slot></slot>
      </div>
    </details>`;
  }
}