import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { ModalController, NavParams } from '@ionic/angular';
import * as _ from 'lodash';
import { AuthService } from 'src/app/services/auth.service';
import { ChatService } from 'src/app/services/chat.service';
import { NewGroupPage } from '../../new-group/new-group.page';
import { GroupMessagesPage } from '../group-messages.page';
import { ThemeService } from 'src/app/services/theme.service'

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

  contact: string[] = [" Ana M.", "Andre F.", "Bruno G.", "Catarina T", "Tiago"];

  headers: HttpHeaders;
  options:any;
  listContacts: any[];
  contacts: any;
  textSearch:string;
  room:any;
  members:any;
  dm:any;
  isGroupCreated:boolean;
  groupName:string;
  selectedUserList:any;

  @Input() roomId:string;
  @Output() openGroupMessage:EventEmitter<any> = new EventEmitter<any>();

  constructor(
    private modalController: ModalController,
    private http: HttpClient,
    private chatService: ChatService,
    private authService: AuthService,
    public ThemeService: ThemeService
    //private navParams: NavParams,
  )
  {
    this.loggedUser = authService.ValidatedUserChat['data'];
    this.textSearch="";
    this.dm=null;
    this.room=null;
    /* this.isGroupCreated = this.navParams.get('isCreated');
    this.groupName = this.navParams.get('name');
    this.room = this.navParams.get('room');
    this.members = this.navParams.get('members'); */
  }

  ngOnInit() {
    //this.getRoomInfo();
    this.loadUsers();
    console.log(this.roomId);
    this.getChatInfo();
    //console.log(this.isGroupCreated);
  }

  getChatInfo(){
    console.log('HERE');
    this.chatService.getRoomInfo(this.roomId).subscribe(room=>{
      console.log('HERE 2');
      console.log(room['room']);
      this.getGroupContacts(room['room']);
    });
  }
  deleteMember(data:any){
    console.log(data);

    let body = {
      "roomId": this.roomId,
      "userId": data._id,
    }
    console.log(body);
    this.chatService.getRoomInfo(this.roomId).subscribe(room=>{
      if(room['room'].t == "p"){
        this.chatService.removeGroupMember(body).subscribe(res=>{
          console.log(res);
          this.getMembers();
          this.getChatInfo();
        });
      }
      else if(room['room'].t == "c"){
        this.chatService.removeChannelMember(body).subscribe(res=>{
          console.log(res);
          this.getMembers();
          this.getChatInfo();
        });
      }
    });
  }

  getMembers(){
    this.chatService.getRoomInfo(this.roomId).subscribe(res=>{
      console.log(res);
      let room = res['room'];

      if(room.t == "p"){
        this.chatService.getGroupMembers(this.roomId).subscribe(res=>{
          this.members = res['members'];
        });
      }
      else if(room.t == "c"){
        this.chatService.getChannelMembers(this.roomId).subscribe(res=>{
          this.members = res['members'];
        });
      }
    });
  }

  getGroupContacts(room:any){
    this.showLoader = true;
    if(room.t === 'p'){
      this.chatService.getGroupMembers(this.roomId).subscribe(res=>{
        this.members = res['members'];
        this.loadUsers1(this.members);
        this.showLoader = false;
      });
    }
    else{
      this.chatService.getChannelMembers(this.roomId).subscribe(res=>{
        this.members = res['members'];
        this.loadUsers1(this.members);
        this.showLoader = false;
      });
    }
  }

  updateGroup(){
    this.showLoader = true;
    this.chatService.getRoomInfo(this.roomId).subscribe(room=>{
      this.room = room['room'];
      this.addContacts(this.room);
      this.showLoader = false;
      this.openGroupMessage.emit(this.room._id);
    });
  }
  openGroupMessagesPage(){
    this.showLoader = true;
    this.openGroupMessage.emit(this.roomId)
    this.showLoader = false;
  }

  loadUsers1(members:any){
    this.options = {
      headers: this.headers,
    };
    this.chatService.getAllUsers().subscribe((res:any)=>{



      if(members){
        this.contacts =  res.users.filter(f => !this.members.some(item => item._id === f._id));
      }
      else{
        this.contacts = res.users.filter(data => data.username != this.loggedUser.me.username);
      }

      this.users = this.contacts.sort((a,b) => {
        if(a.name < b.name){
          return -1;
        }
        if(a.name > b.name){
          return 1;
        }
        return 0;
      });
      console.log(this.users);

      this.showLoader = false;
    });
  }

  loadUsers(){
    this.options = {
      headers: this.headers,
    };
    this.chatService.getAllUsers().subscribe((res:any)=>{



      if(this.members){
        this.contacts =  res.users.filter(f => !this.members.some(item => item._id === f._id));
      }
      else{
        this.contacts = res.users.filter(data => data.username != this.loggedUser.me.username);
      }

      this.users = this.contacts.sort((a,b) => {
        if(a.name < b.name){
          return -1;
        }
        if(a.name > b.name){
          return 1;
        }
        return 0;
      });
      console.log(this.users);

      this.showLoader = false;
    });
  }

  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(ev){
    ev.target.complete();
  }

  async close(){
    this.modalController.dismiss();
    if(this.isGroupCreated){
      console.log('go to conversa');
    }
    else{
      this.modalController.dismiss();
      console.log('go to new group page');
      const modal = await this.modalController.create({
        component: NewGroupPage,
        componentProps: {
          name:this.groupName,
          duration:'',
        },
        cssClass: 'new-group modal-desktop',
        backdropDismiss: false,
      });
      await modal.present();
    }
  }

  onChange(event){
    this.textSearch = event.detail.value;
  }

  clicked(){
    console.log('clicked');
  }

  selectedContact(user:any){
  /*   this.groupName = this.room.name; */
    user.isChecked = !user.isChecked;
  }

  addContacts(room:any){
    console.log(room);
    this.selectedUserList = this.users.filter(function(contact) {
      return contact.isChecked == true;
    });
    console.log( this.selectedUserList);
    this.selectedUserList.forEach(user=>{
      let body ={
        "roomId":room._id,
        "userId":user._id,
      }
      this.chatService.addUserToGroup(body).subscribe(res=>{
        console.log(res['success']);
      });
    });
  }

  /* createGroup(){
    console.log(this.groupName);
    if(!this.isGroupCreated){
      let body = { "name":this.groupName, }
      this.chatService.addGroup(body).subscribe(res=>{
        console.log('group created');
        console.log(res['group']);
        this.addContacts(res['group']);
        this.openGroupMessages(res['group']);

      });

    }
    else{
      this.addContacts(this.room);
      this.close();
    }
  } */

  async newGroup(){
    this.close();
    const modal = await this.modalController.create({
      component: NewGroupPage,
      cssClass: 'new-group modal-desktop',
      backdropDismiss: false,
    });
    await modal.present();
    modal.onDidDismiss();
  }

  async openGroupMessages(room:any){
    this.close();
    const modal = await this.modalController.create({
      component: GroupMessagesPage,
      componentProps: {
        room: room,
      },
      cssClass: 'group-messages',
      backdropDismiss: false
    });

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

}
