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

import InputPretabStyle from "@styles/ui/input-pretab.scss?inline";

export type TemsInputPretabProps = {
  label?: string;
  icon?: TemplateResult;
  size: "sm" | "md" | "lg";
  disabled: boolean;
  active: boolean;
};

@customElement("tems-input-pretab")
export class TemsInputPretab extends LitElement {
  static styles = css`
    ${unsafeCSS(InputPretabStyle)}
  `;

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

  @property({ attribute: false })
  icon: TemsInputPretabProps["icon"];

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

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

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

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

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

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

    return html`<div
      class=${classMap(classes)}
      disabled=${this.disabled || nothing}
      @click=${this._handleClickEvent}
    >
      <span class="icon">${this.icon ? html`${this.icon}` : html`<slot name="icon"></slot>`}</span>
      <label
        >${
          this.label
            ? html`${this.label}`
            : html`<slot></slot><slot name="label"></slot>`
        }</label
      >
    </div>`;
  }
}