import type { NDKUserProfile } from '@nostr-dev-kit/ndk';
import { getProfile } from '@utils/profileUtils';
import { LitElement, css, html } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';

import '@components/EveLink';

@customElement('arx-nostr-short-profile')
export class ShortProfile extends LitElement {
  @property() profile!: NDKUserProfile;
  @property() npub = '';

  @state()
  private displayName = '';

  @state()
  private profileUrl = '';

  static override styles = [
    css`
      :host {
        display: inline-block;
      }

      arx-eve-link {
        color: var(--color-base-content);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.25rem 0.5rem;
        border-radius: var(--radius-selector);
        transition: all 0.2s ease;
        white-space: nowrap;
      }

      arx-eve-link:hover {
        background-color: oklch(from var(--color-base-300) l c h / 0.5);
      }

      arx-eve-link:focus-visible {
        outline: var(--border) solid var(--color-accent);
        outline-offset: 2px;
      }

      span {
        font-weight: 500;
        font-size: 0.95rem;
      }

      arx-nostr-avatar {
        flex-shrink: 0;
        transition: transform 0.2s ease;
      }

      arx-eve-link:hover arx-nostr-avatar {
        transform: scale(1.05);
      }
    `,
  ];

  protected override firstUpdated(): void {
    const { displayName, profileUrl } = getProfile({
      profile: this.profile,
      npub: this.npub,
    });
    this.displayName = displayName;
    this.profileUrl = profileUrl;
  }

  override render() {
    return html`
      <arx-eve-link href=${this.profileUrl}>
        <arx-nostr-avatar
          .profile=${this.profile}
          size="short"
        ></arx-nostr-avatar>
        <span>${this.displayName}</span>
      </arx-eve-link>
    `;
  }
}
