import { html, css, LitElement } from 'lit';
import { property, customElement, state } from 'lit/decorators.js';
import type { NDKUserProfile } from '@nostr-dev-kit/ndk';
import { getUserProfile } from '../ndk';
import '@components/profiles/ShortProfile';
import '@components/profiles/MediumProfile';
import '@components/profiles/LargeProfile';
import '@components/profiles/CardProfile';

@customElement('arx-nostr-profile')
export class NostrProfile extends LitElement {
  @property() npub = '';

  @property({ reflect: true }) renderType:
    | 'short'
    | 'medium'
    | 'large'
    | 'card' = 'short';

  @state()
  private profile: NDKUserProfile | undefined = undefined;

  @state()
  private error: string | null = null;

  static override styles = [
    css`
      .nostr-profile {
        display: inline-block;
      }
    `,
  ];

  override async connectedCallback() {
    super.connectedCallback();
    await this.loadProfile();
  }

  async loadProfile() {
    try {
      this.profile = await getUserProfile(this.npub);
    } catch (error) {
      this.error = 'Failed to load profile';
      console.error(error);
    }
  }

  override render() {
    if (this.error) {
      return html`<arx-error-view .error=${this.error}></arx-error-view>`;
    }

    if (!this.profile) {
      return html`<arx-loading-view></arx-loading-view>`;
    }

    switch (this.renderType) {
      case 'short':
        return html`<arx-nostr-short-profile .profile=${this.profile} npub=${this.npub}></arx-nostr-short-profile>`;
      case 'medium':
        return html`<arx-nostr-medium-profile .profile=${this.profile} npub=${this.npub}></arx-nostr-medium-profile>`;
      case 'large':
        return html`<arx-nostr-large-profile .profile=${this.profile} npub=${this.npub}></arx-nostr-large-profile>`;
      case 'card':
        return html`<arx-nostr-card-profile .profile=${this.profile} npub=${this.npub}></arx-nostr-card-profile>`;
      default:
        return html`<p>Invalid render type</p>`;
    }
  }
}