// Mockup https://www.figma.com/design/zsq2ahat30acTnumyy9aqC/00.Small-System?node-id=1205-69213&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 ButtonStyle from "@styles/buttons/tems-button.scss?inline";

export type TemsButtonProps = {
  label?: string;
  iconLeft?: TemplateResult;
  iconRight?: TemplateResult;
  size: "sm" | "md" | "lg";
  type:
    | "primary"
    | "link-color"
    | "outline-color"
    | "outline-gray"
    | "transparent-color"
    | "transparent-gray";
  disabled?: boolean;
};

@customElement("tems-button")
export class TemsButton extends LitElement {
  static styles = css`
    ${unsafeCSS(ButtonStyle)}
  `;

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

  @property({ attribute: false })
  iconLeft: TemsButtonProps["iconLeft"];

  @property({ attribute: false })
  iconRight: TemsButtonProps["iconRight"];

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

  @property({ attribute: "type", type: String, reflect: true })
  type: TemsButtonProps["type"] = "primary";

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

  _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",
    };
  }
  _getType() {
    const allowedtypes = [
      "primary",
      "link-color",
      "outline-color",
      "outline-gray",
      "transparent-color",
      "transparent-gray",
    ];
    if (this.type && !allowedtypes.includes(this.type)) {
      this.type = "primary";
    }
    return {
      primary: this.type === "primary",
      "link-color": this.type === "link-color",
      "outline-color": this.type === "outline-color",
      "outline-gray": this.type === "outline-gray",
      "transparent-color": this.type === "transparent-color",
      "transparent-gray": this.type === "transparent-gray",
    };
  }

  _handleClickEvent(e: Event) {
    e.preventDefault();
    this.dispatchEvent(
      new CustomEvent("clicked", { detail: { target: this } }),
    );
  }

  render() {
    const classes = {
      ...this._getSizeClasses(),
      ...this._getType(),
    };
    return html`<button
      class=${classMap(classes)}
      disabled=${this.disabled || nothing}
      @click=${this._handleClickEvent}
    >
      ${
        this.iconLeft
          ? html`<span>${this.iconLeft}</span>`
          : html`<slot name="icon-left"></slot>`
      }
      ${
        this.label
          ? html`<span>${this.label}</span>`
          : html`<slot name="label"></slot><slot></slot>`
      }
      ${
        this.iconRight
          ? html`<span>${this.iconRight}</span>`
          : html`<slot name="icon-right"></slot>`
      }
    </button>`;
  }
}