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

import BadgeStyle from "@styles/ui/badge.scss?inline";

export type TemsBadgeProps = {
  label?: string;
  size: "md" | "sm" | "xs";
  type:
    | "success"
    | "warning"
    | "information"
    | "error"
    | "brand"
    | "default"
    | "disabled";
};

@customElement("tems-badge")
export class TemsBadge extends LitElement {
  static styles = css`
    ${unsafeCSS(BadgeStyle)}
  `;

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

  @property({ attribute: "size", reflect: true })
  size: TemsBadgeProps["size"] = "md";

  @property({ attribute: "type", reflect: true })
  type: TemsBadgeProps["type"] = "default";

  _getTypeClasses() {
    const allowedTypes = [
      "success",
      "warning",
      "information",
      "error",
      "brand",
      "disabled",
    ];
    if (this.type && !allowedTypes.includes(this.type)) {
      this.type = "default";
    }
    return {
      default: this.type === "default",
      success: this.type === "success",
      warning: this.type === "warning",
      information: this.type === "information",
      error: this.type === "error",
      brand: this.type === "brand",
      disabled: this.type === "disabled",
    };
  }

  _getSizeClasses() {
    const allowedSizes = ["md", "sm", "xs"];
    if (this.size && !allowedSizes.includes(this.size)) {
      this.size = "md";
    }
    return {
      md: this.size === "md",
      sm: this.size === "sm",
      xs: this.size === "xs",
    };
  }

  render() {
    const classes = {
      ...this._getTypeClasses(),
      ...this._getSizeClasses(),
    };

    return html`<div class=${classMap(classes)}>${this.label ? html`${this.label}` : html`<slot></slot>`}</div>`;
  }
}