import { html } from 'lit';
import { state, property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
import { watch } from '../../internal/watch.mjs';
import styles from './avatar.styles.mjs';

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result)
    __defProp(target, key, result);
  return result;
};
class FlowUiAvatar extends FlowRdfElement {
  constructor() {
    super(...arguments);
    this.hasError = false;
    this.image = "";
    this.label = "";
    this.initials = "";
    this.loading = "eager";
    this.shape = "circle";
  }
  handleImageChange() {
    this.hasError = false;
  }
  render() {
    const avatarWithImage = html`
      <img
        part="image"
        class="avatar__image"
        src="${this.image}"
        loading="${this.loading}"
        alt=""
        @error="${() => this.hasError = true}"
      />
    `;
    let avatarWithoutImage = html``;
    if (this.initials) {
      avatarWithoutImage = html`
        <div part="initials" class="avatar__initials">${this.initials}</div>
      `;
    } else {
      avatarWithoutImage = html`
        <slot name="icon" part="icon" class="avatar__icon" aria-hidden="true">
          <flow-ui-icon name="person-fill" library="system"></flow-ui-icon>
        </slot>
      `;
    }
    return html`
      <div
        part="base"
        class=${classMap({
      avatar: true,
      "avatar--circle": this.shape === "circle",
      "avatar--rounded": this.shape === "rounded",
      "avatar--square": this.shape === "square"
    })}
        role="img"
        aria-label=${this.label}
      >
        ${this.image && !this.hasError ? avatarWithImage : avatarWithoutImage}
      </div>
    `;
  }
}
FlowUiAvatar.styles = styles;
__decorateClass([
  state()
], FlowUiAvatar.prototype, "hasError", 2);
__decorateClass([
  property()
], FlowUiAvatar.prototype, "image", 2);
__decorateClass([
  property()
], FlowUiAvatar.prototype, "label", 2);
__decorateClass([
  property()
], FlowUiAvatar.prototype, "initials", 2);
__decorateClass([
  property()
], FlowUiAvatar.prototype, "loading", 2);
__decorateClass([
  property({ reflect: true, type: String })
], FlowUiAvatar.prototype, "shape", 2);
__decorateClass([
  watch("image")
], FlowUiAvatar.prototype, "handleImageChange", 1);

export { FlowUiAvatar as default };
