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

import type { User } from "@src/tems.d.ts";

import ProfileCardStyle from "@styles/navbar/ui/tems-profile-card.scss?inline";

export type TemsProfileCardProps = {
  user?: User;
  active: boolean;
};

@customElement("tems-profile-card")
@localized()
export class TemsProfileCard extends LitElement {
  static styles = css`
    ${unsafeCSS(ProfileCardStyle)}
  `;

  @property({ attribute: false })
  user: TemsProfileCardProps["user"];

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

  _handleClickEvent() {
    this.dispatchEvent(new CustomEvent("clicked"));
  }

  render() {
    const userName = `${this.user?.first_name || ""} ${
      this.user?.last_name || ""
    }`.trim();
    return html`<div
      @click=${this._handleClickEvent}
      active="${this.active || nothing}"
    >
      <tems-avatar .user=${this.user}></tems-avatar>
      <p>
        <span>${userName.length > 0 ? userName : msg("Visitor")}</span>
        <span>${this.user?.email || nothing}</span>
      </p>
    </div>`;
  }
}