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

import TagStyle from "@styles/shared/ui/tems-tag.scss?inline";
import { classMap } from "lit/directives/class-map.js";

import "~icons/material-symbols/close-rounded";

export type TemsTagProps = {
  label?: string;
  size: string;
  active: boolean;
  disabled: boolean;
  displayClose?: boolean;
  count?: number;
};

@customElement("tems-tag")
export class TemsTag extends LitElement {
  static styles = css`
    ${unsafeCSS(TagStyle)}
  `;
  @property({ attribute: "label", type: String, reflect: true })
  label: TemsTagProps["label"];

  @property({ attribute: "size", type: String, reflect: true })
  size: TemsTagProps["size"] = "sm";

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

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

  @property({ attribute: "display-close", type: Boolean, reflect: true })
  displayClose: TemsTagProps["displayClose"];

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

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

    // Do we want to format ?
    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 String(this.count); // Less than 1000
  }
  _getSizeClasses() {
    const allowedSizes = ["xs", "sm", "md"];
    if (this.size && !allowedSizes.includes(this.size)) {
      this.size = "sm";
    }
    return {
      xs: this.size === "xs",
      sm: this.size === "sm",
      md: this.size === "md",
    };
  }

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

  render() {
    const counter = this._formatCounter();
    const classes = {
      ...this._getSizeClasses(),
    };
    return html`<label
      @click=${this._handleClickEvent}
      class=${classMap(classes)}
      active=${this.active || nothing}
      disabled=${this.disabled || nothing}
    >
      ${this.label ? html`<span>${this.label}</span>` : html`<slot></slot>`}
      ${counter ? html`<span class="count">${counter}</span>` : nothing}
      ${
        this.displayClose
          ? html`<span
            ><icon-material-symbols-close-rounded></icon-material-symbols-close-rounded
          ></span>`
          : nothing
      }
    </label>`;
  }
}