import {
  Component,
  computed,
  input
} from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgIcon, provideIcons } from '@ng-icons/core';
import {
  lucideCheck,
  lucideCheckCheck,
  lucideClock3
} from '@ng-icons/lucide';
import { ChatMessageMarkdownComponent } from '../../../chat';
import { isSingleUnicodeEmojiOnlyMessage } from '../../../custom-emoji';
import type { DirectMessage } from '../../domain/models/direct-message.model';

const RICH_MARKDOWN_PATTERNS = [

  /!\[[^\]]*\]\([^\s)]+\)/,

  /https?:\/\/[^\s)]+?\.(?:png|jpe?g|gif|webp|svg)(?:\?[^\s)]*)?/i,

  /\[[^\]]+\]\([^\s)]+\)/

];

@Component({
  selector: 'app-dm-message',
  standalone: true,
  imports: [
    CommonModule,
    NgIcon,
    ChatMessageMarkdownComponent
  ],
  viewProviders: [provideIcons({ lucideCheck, lucideCheckCheck, lucideClock3 })],
  templateUrl: './dm-message.component.html'
})
export class DmMessageComponent {
  readonly message = input.required<DirectMessage>();
  readonly currentUserId = input.required<string>();
  readonly isOutgoing = computed(() => this.message().senderId === this.currentUserId());

  requiresRichMarkdown(content: string): boolean {
    return isSingleUnicodeEmojiOnlyMessage(content)
      || RICH_MARKDOWN_PATTERNS.some((pattern) => pattern.test(content));
  }

  statusIcon(status: DirectMessage['status']): string {
    if (status === 'QUEUED') {
      return 'lucideClock3';
    }

    if (status === 'SENT') {
      return 'lucideCheck';
    }

    return 'lucideCheckCheck';
  }
}
