import { NDKEvent } from '@nostr-dev-kit/ndk';
import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';

import '@components/NostrProfile';

@customElement('arx-header-suggestion')
export class HeaderSuggestion extends LitElement {
  @property({ type: NDKEvent }) event: NDKEvent | undefined;
  @property({ type: Array<NDKEvent> }) allEvents: NDKEvent[] | undefined;

  static override styles = css`
    :host {
      display: block;
      padding: var(--space-xs) var(--space-sm);
      cursor: pointer;
      transition: background 0.2s ease;
    }
  `;

  override render() {
    if (!this.event) return html``;
    if (this.event.kind === 0)
      return html`<arx-nostr-profile
        npub=${this.event.pubkey}
      ></arx-nostr-profile>`;
    if (this.event.kind === 892) {
      const threadName = this.event.tags.find((tag) => tag[0] === 'name')?.[1] || '';
      return html`Arbor Thread: ${threadName}`;
    }
    if (this.event.kind === 893) {
      const threadId = this.event.tags.find((tag) => tag[0] === 'E')?.[1] || '';
      const thread = this.allEvents?.find((event) => event.id === threadId);
      const threadName = thread?.tags.find((tag) => tag[0] === 'name')?.[1] || '';
      return html`Arbor Post in ${threadName}:
      ${this.event.content.substring(0, 100)}`;
    }
    if (this.event.kind === 60891) {
      const categoryId = this.event.tags.find((tag) => tag[0] === 'd')?.[1] || '';
      const forum = this.allEvents?.find(
        (event) =>
          event.kind === 60890 && event.tags.some((tag) => tag[0] === 'forum' && tag[1] === `60891:${categoryId}`),
      );
      if (!forum) return html`Orphan (deleted) forum category`;
      const forumName = forum.tags.find((tag) => tag[0] === 'd')?.[1] || '';
      const arborText = `Arbor${forumName === 'arbor' ? '' : ` [${forumName}]`}`;
      const categoryName = this.event.tags.find((tag) => tag[0] === 'name')?.[1] || '';
      return html`${arborText} Category: ${categoryName}`;
    }
    return html`Event kind ${this.event.kind}`;
  }
}
