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

import "~icons/mynaui/question-circle";

import LabelStyle from "@styles/forms/ui/tems-label.scss?inline";

export type TemsLabelProps = {
  info?: string;
  label?: string;
  optional?: string | TemplateResult;
  required?: boolean;
};

@customElement("tems-label")
@localized()
export class TemsLabel extends LitElement {
  static styles = css`
    ${unsafeCSS(LabelStyle)}
  `;

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

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

  @property({ attribute: "optional" })
  optional: TemsLabelProps["optional"];

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

  render() {
    return html`<label>
      ${this.required ? html`<span class="required">*</span>` : nothing}
      <span class="content">
        ${this.label ? html`${this.label}` : html`<slot></slot>`}
        ${
          this.info
            ? html`<span title=${this.info}
              ><icon-mynaui-question-circle></icon-mynaui-question-circle
            ></span>`
            : nothing
        }
      </span>

      ${
        this.optional !== "false" && this.optional
          ? html`<span class="optional"
            >${
              this.optional === "true"
                ? msg(html`(optional)`, { desc: "Input optional mention" })
                : this.optional
            }</span
          >`
          : nothing
      }
    </label>`;
  }
}