import { Component, inject, Input } from '@angular/core';
import { GroupChatter } from '../../shared/models/group-chatter';
import { TwitchUserItemComponent } from "../twitch-user-item/twitch-user-item.component";
import { MatInputModule } from '@angular/material/input';
import { MatIconModule } from '@angular/material/icon';
import { MatFormFieldModule } from '@angular/material/form-field';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { containsLettersInOrder } from '../../shared/utils/string-compare';
import { MatButtonModule } from '@angular/material/button';
import { MatDialog } from '@angular/material/dialog';
import { HermesClientService } from '../../hermes-client.service';
import { Group } from '../../shared/models/group';
import { TwitchUserItemAddComponent } from '../twitch-user-item-add/twitch-user-item-add.component';
import EventService from '../../shared/services/EventService';

@Component({
  selector: 'twitch-user-list',
  imports: [
    MatButtonModule,
    MatFormFieldModule,
    MatIconModule,
    MatInputModule,
    ReactiveFormsModule,
    TwitchUserItemComponent,
  ],
  templateUrl: './twitch-user-list.component.html',
  styleUrl: './twitch-user-list.component.scss'
})
export class TwitchUserListComponent {
  @Input({ required: true }) twitchUsers: GroupChatter[] = [];
  @Input() group: Group | undefined;

  readonly dialog = inject(MatDialog);
  readonly client = inject(HermesClientService);
  readonly events = inject(EventService);
  readonly searchControl: FormControl = new FormControl('');

  opened = false;

  constructor() {
    this.events.listen('delete_group_chatter', (chatter: GroupChatter) => {
      this.twitchUsers.splice(this.twitchUsers.findIndex(c => c.group_id == chatter.group_id && c.chatter_id == chatter.chatter_id), 1);
    });
  }

  get users(): GroupChatter[] {
    return this.twitchUsers.filter(u => containsLettersInOrder(u.chatter_label, this.searchControl.value));
  }

  add() {
    if (this.opened)
      return;

    this.opened = true;

    const dialogRef = this.dialog.open(TwitchUserItemAddComponent, {
      data: { username: this.searchControl.value, group: this.group },
    });

    dialogRef.afterClosed().subscribe((chatter: GroupChatter) => {
      this.opened = false;
      if (!chatter)
        return;

      this.twitchUsers.push(chatter);
    });
  }
}