import defaultAvatar from '@assets/default-avatar.png';
import type { NDKUserProfile } from '@nostr-dev-kit/ndk';
import { LitElement, css, html } from 'lit-element';
import { customElement, property } from 'lit/decorators.js';
type AvatarSize = 'short' | 'medium' | 'large' | 'huge';

@customElement('arx-nostr-avatar')
export class ArxNostrAvatar extends LitElement {
  @property({ type: Object }) profile!: NDKUserProfile;
  @property({ type: String }) size!: AvatarSize;

  static override styles = [
    css`
      img {
        border-radius: 50%;
        width: var(--avatar-size);
        height: var(--avatar-size);
      }
      .short-avatar {
        --avatar-size: 2rem;
      }
      .medium-avatar {
        --avatar-size: 4rem;
      }
      .large-avatar {
        --avatar-size: 6rem;
      }
      .huge-avatar {
        --avatar-size: 10rem;
      }
    `,
  ];

  override render() {
    return html`
      <img
        class="${this.size}-avatar"
        src=${this.profile.image || defaultAvatar}
        alt=${this.profile.name || this.profile.displayName || ''}
        @error=${this.handleError}
      />
    `;
  }

  handleError(event: Event) {
    event.preventDefault();
    (event.target as HTMLImageElement).src = defaultAvatar;
  }
}
