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

import BreadcrumbItemStyle from "@styles/header/breadcrumbs/ui/tems-breadcrumb-item.scss?inline";

export type TemsBreadcrumbItemProps = {
  label?: string;
  icon?: TemplateResult;
  active?: boolean;
  disabled?: boolean;
};

@customElement("tems-breadcrumb-item")
export class TemsBreadcrumbItem extends LitElement {
  static styles = css`
    ${unsafeCSS(BreadcrumbItemStyle)}
  `;

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

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

  @property({ attribute: "active", type: Boolean, reflect: true })
  active: TemsBreadcrumbItemProps["active"];

  @property({ attribute: "disabled", type: Boolean, reflect: true })
  disabled: TemsBreadcrumbItemProps["disabled"];

  _handleClickEvent(e: Event) {
    e.preventDefault();
    if (!this.active && !this.disabled) {
      this.dispatchEvent(
        new CustomEvent("clicked", { detail: { target: this } }),
      );
    }
  }

  render() {
    return html`<button
      active=${this.active || nothing}
      disabled=${this.disabled || nothing}
      @click=${this._handleClickEvent}
    >
      ${
        this.icon
          ? html`<span>${this.icon}</span>`
          : html`<slot name="icon"></slot>`
      }
      ${
        this.label
          ? html`<span>${this.label}</span>`
          : html`<slot name="label"></slot><slot></slot>`
      }
    </button>`;
  }
}