import { HttpHeaders } from '@angular/common/http';
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { ChatService } from 'src/app/services/chat.service';
import { MessagesPage } from '../messages.page';
import { ThemeService } from 'src/app/services/theme.service'
import { ChatSystemService } from 'src/app/services/chat/chat-system.service'
import { SessionStore } from 'src/app/store/session.service';
import { ContactRepositoryService } from 'src/app/services/Repositorys/contacts/repository/contacts-repository.service';
import { UserContacts } from 'src/app/services/Repositorys/contacts/data-source/contacts-data-source.service';
import { RoomRepositoryService } from 'src/app/services/Repositorys/chat/repository/room-repository.service';



class UserToSelect {

}

@Component({
  selector: 'app-contacts',
  templateUrl: './contacts.page.html',
  styleUrls: ['./contacts.page.scss'],
})
export class ContactsPage implements OnInit {
  loggedUser: any;

  headers: HttpHeaders;
  options: any;
  textSearch: string;
  room: any;
  dm: any;
  sessionStore = SessionStore
  loading = false
  @Input() roomId: string;

  @Output() openMessage: EventEmitter<any> = new EventEmitter<any>();
  @Output() emptyTextDescriptionOpen: EventEmitter<any> = new EventEmitter<any>();
  @Output() backToChat: EventEmitter<any> = new EventEmitter<any>();
  @Output() closeAllDesktopComponents: EventEmitter<any> = new EventEmitter<any>();

  userList: UserContacts[];
  originalUserList: any[] = [];

  CoolList = []

  constructor(
    private modalController: ModalController,
    private chatService: ChatService,
    public ThemeService: ThemeService,
    public ChatSystemService: ChatSystemService,
    private contactsRepositoryService: ContactRepositoryService,
    private roomRepositoryService: RoomRepositoryService
  ) {
    this.loggedUser = SessionStore.user.ChatData['data'];
    this.textSearch = "";
    this.dm = null;
    this.room = null;
  }

  async ngOnInit() {

    this.loadUsers();
  }

  onChange(event) {
    this.textSearch = event.detail.value.toLowerCase();
    this.userList = this.originalUserList.filter((e) => {
      const username = e.wxFullName.toLowerCase();
      return username.includes(this.textSearch);
    });

    this.userList.sort((a, b) => a.wxFullName.toLowerCase().localeCompare(b.wxFullName.toLowerCase()));
  }

  openMessagesPage(username: string) {
    this.createRoom(username);
   /* if (window.innerWidth < 701) {
      this.createRoom(username);
    }
    else {
       let body = {
        username: username,
      }

      this.loading = true
      this.chatService.createRoom(body).subscribe(res => {
        this.room = res['room'];

        this.ChatSystemService.getAllRooms(() => {
          this.openMessage.emit(this.room._id);

          this.loading = false
        }, this.room._id);

      }, () => {
        this.loading = false
      }); 
    }*/
  }

  async loadUsers() {
    try {
      let users = await this.contactsRepositoryService.getUsers();
      if (users.isOk()) {
        const userData = users.value.data.result;
        console.log(userData)
        this.originalUserList = userData;
        this.userList = [...this.originalUserList];
        this.userList.sort((a, b) => a.wxFullName.toLowerCase().localeCompare(b.wxFullName.toLowerCase()));
        console.log('User data loaded successfully:', this.originalUserList);
      } else {
        console.error('Failed to fetch users:', users.error);
      }
      this.loading = false;
    } catch (error) {
      console.error('Error loading users', error);
      this.loading = false;
    }
  }

  separateLetter(record, recordIndex, records) {
    const normalize = (str) => str.normalize('NFD').replace(/[\u0300-\u036f]/g, '');

    if (recordIndex == 0) {
      return normalize(record.wxFullName[0]).toUpperCase();
    }

    let firstPrev = normalize(records[recordIndex - 1].wxFullName[0]).toUpperCase();
    let firstCurrent = normalize(record.wxFullName[0]).toUpperCase();

    if (firstPrev !== firstCurrent) {
      return firstCurrent;
    }
    return null;
  }

  doRefresh(event) {
  }

  close() {
    if (this.roomId) {
      this.backToChat.emit({ roomId: this.roomId });
    } else {
      this.closeAllDesktopComponents.emit();
    }

  }

  clicked() {

  }

  async createRoom(username: string) {
    let body = {
      roomName: username,
      createdBy: SessionStore.user.UserId,
      roomType: 0,
      expirationDate: ""
    }
    let room = await this.roomRepositoryService.create(body)
    console.log(room)
    /*  this.chatService.createRoom(body).subscribe(res => {
 
       this.room = res['room'];
       this.openMessagesModal(this.room._id);
       this.ChatSystemService.getAllRooms()
     }); */
  }

  async openMessagesModal(roomId: any) {



    const modal = await this.modalController.create({
      component: MessagesPage,
      cssClass: 'modal modal-desktop isMessagesChatOpened',
      componentProps: {
        roomId: roomId,
      },
    });

    modal.onDidDismiss();
    await modal.present();
  }

  async openMessages(username: string) {
    /* this.close(); */

    let dm: any;
    //Create new room
    this.createRoom(username);

  }

}