/* eslint-disable @typescript-eslint/member-ordering */
import {
  Component,
  computed,
  inject,
  output
} from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideMessageCircle } from '@ng-icons/lucide';
import { APP_TRANSLATE_IMPORTS } from '../../../../core/i18n';
import { ThemeNodeDirective, ThemeService } from '../../../theme';
import { VoiceControlsComponent } from '../../../voice-session';
import { VirtualListComponent } from '../../../../shared/components/virtual-list';
import type { DirectMessageConversation } from '../../domain/models/direct-message.model';
import { DirectMessageService } from '../../application/services/direct-message.service';
import { DmConversationItemComponent } from './dm-conversation-item.component';

@Component({
  selector: 'app-dm-conversations-panel',
  standalone: true,
  imports: [
    CommonModule,
    DmConversationItemComponent,
    NgIcon,
    ThemeNodeDirective,
    VirtualListComponent,
    VoiceControlsComponent,
    ...APP_TRANSLATE_IMPORTS
  ],
  viewProviders: [provideIcons({ lucideMessageCircle })],
  host: { class: 'contents' },
  templateUrl: './dm-conversations-panel.component.html'
})
export class DmConversationsPanelComponent {
  private readonly theme = inject(ThemeService);
  readonly directMessages = inject(DirectMessageService);
  readonly listPanelStyles = computed(() => this.theme.getLayoutItemStyles('dmConversationsPanel'));
  readonly conversationSelected = output<string>();

  trackConversationId(index: number, conversation: DirectMessageConversation): string {
    return conversation.id;
  }
}