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

import { AvatarSvg } from "@helpers";
import AvatarStyle from "@styles/ui/avatar.scss?inline";

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

export type TemsAvatarProps = {
  size: "md" | "sm" | "lg";
  user?: User | undefined;
};

@customElement("tems-avatar")
export class TemsAvatar extends LitElement {
  static styles = css`
    ${unsafeCSS(AvatarStyle)}
  `;

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

  @property({ attribute: false, state: true, type: Object })
  user: TemsAvatarProps["user"];

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

  _getSvgFromInitials(customInitials: string | boolean = false) {
    const user_initials = customInitials
      ? customInitials
      : (this.user?.["first_name"]?.[0] || "").toUpperCase() +
          (this.user?.["last_name"]?.[0] || "").toUpperCase() ||
        (this.user?.["name"]?.[0] || "").toUpperCase();

    const svg_avatar = new AvatarSvg()
      .text(user_initials as string)
      .bgColor("transparent")
      .fontFamily("'Inter', sans-serif")
      .generate();

    const base64_avatar = btoa(svg_avatar);

    return base64_avatar;
  }

  render() {
    if (!this.user) {
      return html`<div
        class=${classMap(this._getSizeClasses())}
        style="background-image:url('data:image/svg+xml;base64,${this._getSvgFromInitials(
          "AN",
        )}')"
      ></div>`;
      // Maybe nothing instead of fake user?
    }

    let style = "background-image:";
    if (this.user?.["account"]?.["picture"]) {
      style += `url('${this.user?.["account"]?.["picture"]}'),`;
    }
    style += `url('data:image/svg+xml;base64,${this._getSvgFromInitials()}')`;

    return html`<div
      class=${classMap(this._getSizeClasses())}
      style=${style}
    ></div>`;
  }
}