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

import TabItemStyle from "@styles/ui/tab-item.scss?inline";

export type TemsTabItemProps = {
  active: boolean;
  count?: number;
  disabled: boolean;
  label?: string;
};

@customElement("tems-tab-item")
export class TemsTabItem extends LitElement {
  static styles = css`
    ${unsafeCSS(TabItemStyle)}
  `;

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

  @property({ attribute: "count", type: Number, reflect: true })
  count: TemsTabItemProps["count"];

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

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

  _formatCounter() {
    if (!this.count && this.count !== 0) return;

    const units = [
      { value: 1e12, suffix: "T" }, // Tera
      { value: 1e9, suffix: "G" }, // Giga
      { value: 1e6, suffix: "M" }, // Mega
      { value: 1e3, suffix: "K" }, // Kilo
    ];

    for (const unit of units) {
      if (this.count >= unit.value) {
        return `+${(this.count / unit.value).toFixed(0)}${unit.suffix}`;
      }
    }

    return this.count.toString(); // Less than 1000
  }

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

  render() {
    return html`<button
      class=${classMap({ active: this.active, disabled: this.disabled })}
      @click=${this._handleClickEvent}
      disabled=${this.disabled || nothing}
    >
      ${this.label ? html`${this.label}` : html`<slot></slot>`}${
        this.count || this.count === 0
          ? html`<span>${this._formatCounter()}</span>`
          : nothing
      }
    </button>`;
  }
}