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

import DivisionStyle from "@styles/shared/ui/tems-division.scss?inline";

export type TemsDivisionProps = {
  label?: string;
  type:
    | "h1"
    | "h2"
    | "h3"
    | "h4"
    | "display-1"
    | "display-2"
    | "display-3"
    | "display-4"
    | "body-sm"
    | "body-m"
    | "body-l";
};

@customElement("tems-division")
export class TemsDivision extends LitElement {
  static styles = css`
    ${unsafeCSS(DivisionStyle)};
  `;

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

  @property({ attribute: "type", type: String, reflect: true })
  type: TemsDivisionProps["type"] = "body-m";

  _getType() {
    const allowedTypes = [
      { name: "h1", tagName: literal`h1` },
      { name: "h2", tagName: literal`h2` },
      { name: "h3", tagName: literal`h3` },
      { name: "h4", tagName: literal`h4` },
      { name: "display-1", tagName: literal`div` },
      { name: "display-2", tagName: literal`div` },
      { name: "display-3", tagName: literal`div` },
      { name: "display-4", tagName: literal`div` },
      { name: "body-sm", tagName: literal`p` },
      { name: "body-m", tagName: literal`p` },
      { name: "body-l", tagName: literal`p` },
    ];
    if (!this.type) {
      this.type = "body-m";
    }
    const type =
      allowedTypes.find((t) => t.name === this.type) ||
      allowedTypes.find((t) => t.name === "body-m");
    return type;
  }

  render() {
    const type = this._getType() || { tagName: "p", name: "body-m" };
    return html`<${type.tagName} class=${type.name}>${this.label ? html`${this.label}` : html`<slot></slot>`}</${type.tagName}>`;
  }
}