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';



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 = this.ChatSystemService.users

  CoolList = []

  constructor(
    private modalController: ModalController,
    private chatService: ChatService,
    public ThemeService: ThemeService,
    public ChatSystemService: ChatSystemService
  ) {
    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.ChatSystemService.users.filter((e) => {
      const username = e.name.toLowerCase()
      return username.includes(this.textSearch)
    })


    const alfa = {}

    for (let user of this.userList) {
      
      let firstCharacter = user.name.charAt(0);

      if(!alfa[firstCharacter]) {
        alfa[firstCharacter] = [user]
      } else {
        alfa[firstCharacter].push(user)
      }

    }
    
  }

  openMessagesPage(username:string) {
    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
      });
    }
  }

  loadUsers() {
    this.ChatSystemService.getUser()
  }

  separateLetter(record, recordIndex, records) {
    if(recordIndex == 0) {
      return record.name[0];
    }

    let first_prev = records[recordIndex - 1].name[0];
    let first_current = record.name[0];

    if(first_prev != first_current) {
      return first_current;
    }
    return null;
  }

  doRefresh(event) {
  }

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

  clicked() {
    
  }

  createRoom(username:string){
    let body = {
      username: username,
    }
    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);

  }

}