import type { NDKUserProfile } from '@nostr-dev-kit/ndk';
import { LitElement, css, html } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
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>`;
    }
  }
}
