import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { 
  Component, 
  OnInit,
  ViewChild,
  ViewContainerRef,
  ComponentFactoryResolver,
  ComponentRef,
  ComponentFactory,
  Output
} from '@angular/core';
import { ModalController } from '@ionic/angular';
import { AuthService } from 'src/app/services/auth.service';
import { ChatService } from 'src/app/services/chat.service';
import { ConversationPage } from './conversation/conversation.page';
import { GroupMessagesPage } from './group-messages/group-messages.page';
import { ContactsPage } from './messages/contacts/contacts.page';
import { MessagesPage } from './messages/messages.page';
import { NewGroupPage } from './new-group/new-group.page';
import { NewchatPage } from './newchat/newchat.page';
import { Storage } from '@ionic/storage';
import { AlertService } from 'src/app/services/alert.service';
import { EditGroupPage } from 'src/app/shared/chat/edit-group/edit-group.page';

@Component({
  selector: 'app-chat',
  templateUrl: './chat.page.html',
  styleUrls: ['./chat.page.scss'],
})
export class ChatPage implements OnInit {

  showLoader: boolean;

  headers: HttpHeaders;
  options:any;
  X_User_Id:any;
  X_Auth_Token:any;
  
  private loggedUser: any;
  /* Set segment variable */
  segment:string;
  allGroups: any[];
  privateGroups: any[];
  publicGroups: any[];
  userConnectedList: any[];
  userRooms: any[];
  userChannels: any[];
  userDirectMessages: any[];
  result:any;
  dmUsers:any;

  desktopComponent: any = {
    showMessages: false,
    showGroupMessages: false,
  }

  @ViewChild('messagecontainer', { read: ViewContainerRef }) entry: ViewContainerRef;
  //@ViewChild('groupMessages') child:GroupMessagesPage;
  componentRef: any;

  roomId:any;
  groupRoomId:any;
  showEmptyComponent=true;
  showMessages=false;
  showContacts=false;
  showNewGroup=false;
  showEditGroup=false;
  showGroupMessages=false;
  showGroupContacts=false;
  emptyTextDescription = 'Sem conversa selecionada';

  @Output() getRoomInfo;


  constructor(
    private http:HttpClient,
    private chatService: ChatService,
    private modalController: ModalController,
    private authService: AuthService,
    private storage:Storage,
    private resolver: ComponentFactoryResolver,

    ) { 
      this.headers = new HttpHeaders();
      /* this.headers = this.headers.set('X-User-Id', 'GqjNWiLrGEHRna7Zn');
      this.headers = this.headers.set('X-Auth-Token', 'SJwIgtlqfloPK696fpc2VBvyDluipuIHKB_0Q6-9ycJ'); */
    }
  ngOnInit() {
    this.segment = "Contactos";

    this.authService.userData$.subscribe((res:any)=>{
      this.loggedUser=res;
      console.log(this.loggedUser);
      this.load();
    });
    this.storage.get('userDataKey').then(val=> {
      let t = JSON.parse(unescape(atob(val)));
      this.loggedUser=t;
      //this.load();
    })

    console.log(this.roomId);
    
  }

  closeAllDesktopComponents() {
    this.showMessages=false;
    this.showContacts=false;
    this.showNewGroup=false;
    this.showEditGroup=false;
    this.showGroupMessages=false;
    this.showEmptyComponent=false;
    this.showGroupContacts=false;
    console.log('All components closed!');
  }
  showEmptyContainer(){
    this.showEmptyComponent=true;
  }
  openGroupContactsPage(data){
    console.log(data);
    this.groupRoomId = data;
    console.log(this.groupRoomId);
    this.closeAllDesktopComponents();
    if(window.innerWidth <= 1024){

    }
    else{
      this.showGroupContacts = true;
    }
  }
  openMessagesPage(rid) {
    if( window.innerWidth <= 1024){
      this.openMessagesModal(rid);
    }
    else{
      this.closeAllDesktopComponents();
      this.showEmptyComponent = false;
      this.roomId = rid;
      this.showMessages=true;
    }
  }
  openContactsPage() {
    console.log('OK');
    this.closeAllDesktopComponents();
    
    if( window.innerWidth <= 1024){
      this.selectContact();
    }
    else{
      console.log('here');
      this.showContacts=true;
    }
  }
  openNewGroupPage() {
    if( window.innerWidth <= 1024){
      this.newGroup();
    }
    else{
      this.closeAllDesktopComponents();
      this.showNewGroup=true;
    }
  }

  openEditGroupPage(rid) {
    if( window.innerWidth <= 1024){
      this.editGroup(rid);
    }
    else{
      this.closeAllDesktopComponents();
      this.showEditGroup=true;
    }
  }

  openGroupMessagesPage(data) {
    console.log('HERE');
    
    if( window.innerWidth <= 1024){
      this.openGroupMessagesModal(data);
    }
    else{
      this.closeAllDesktopComponents();
      this.showEmptyComponent = false;
      this.roomId = data;
      this.showGroupMessages=true;
    }
  }

  onSegmentChange(){
    this.load();
  }
  doRefresh(ev:any){
    this.load();
    ev.target.complete();
  }
  load(){
    switch (this.segment)
    {
      case "Contactos":
        this.getDirectMessages();
        break;

      case "Grupos":
        this.getGroups();
        break;
    }
  }
  customRoom(){
    let params = new HttpParams();
    params = params.set("types", "c");
    this.chatService.customsRooms(params).subscribe(res=>{
      console.log(res);
    });
  }
  
  getDirectMessages(){
    this.showLoader = true;
    
    this.chatService.getAllDirectMessages().subscribe((res:any)=>{
      console.log(res.ims);
      
      this.userDirectMessages = res.ims.sort((a,b)=>{
        var dateA = new Date(a._updatedAt).getTime();
        var dateB = new Date(b._updatedAt).getTime();
        return dateB - dateA;
      });
      console.log(this.userDirectMessages);
      this.showLoader = false;
    });
  }
  getChatMembers(){
    this.chatService.getMembers(this.userDirectMessages[0]._id).subscribe(res=> {
      this.dmUsers = res['members'].filter(data => data.username != this.loggedUser.me.username)
    });
  }
  getGroups(){
    this.showLoader = true;
    this.result = this.chatService.getAllPrivateGroups().subscribe((res:any)=>{
      this.privateGroups = res.groups;
      this.result = this.chatService.getAllUserChannels().subscribe((res:any)=>{
      this.publicGroups = res.channels;
      let all = this.privateGroups.concat(this.publicGroups); 
      this.allGroups = all.sort((a,b)=>{
        var dateA = new Date(a._updatedAt).getTime();
        var dateB = new Date(b._updatedAt).getTime();
        return dateB - dateA;
      });
      console.log(this.allGroups);
      this.showLoader = false;
    });
    }); 
  }
  
  async startConversation(selectedUser) {
    const modal = await this.modalController.create({
      component: ConversationPage,
      cssClass: 'conversation',
      backdropDismiss: false,
      componentProps: {
        user: selectedUser,
      }
    });
    await modal.present();
    modal.onDidDismiss();
  }
  async selectContact(){
    const modal = await this.modalController.create({
      component: ContactsPage,
      cssClass: 'contacts',
    });
    await modal.present();
    modal.onDidDismiss();
  }
  async newGroup(){
    const modal = await this.modalController.create({
      component: NewGroupPage,
      cssClass: 'new-group',
    });
    await modal.present();
    modal.onDidDismiss();
  }

  async editGroup(roomId){
    const modal = await this.modalController.create({
      component: EditGroupPage,
      cssClass: 'edit-group',
      componentProps: {
        roomId: roomId,
      },
    });
    await modal.present();
    modal.onDidDismiss().then((res)=>{
      console.log(res.data);
      this.modalController.dismiss(res.data);
    });
  }

  async openMessagesModal(roomId:any){
    this.closeAllDesktopComponents();

    let classs;
    if( window.innerWidth <= 1024){
      classs = 'modal'
    } else  {
      classs = 'chat-mobile-modal-to-Desktop'
    }
    console.log(roomId);
    
    const modal = await this.modalController.create({
      component: MessagesPage,
      cssClass: classs,
      componentProps: {
        roomId: roomId,
      },
    });
    await modal.present();
    modal.onDidDismiss();
  }

  async openGroupMessagesModal(roomId:any){
    let classs;
    if( window.innerWidth <= 1024){
      classs = 'modal'
    } else  {
      classs = 'chat-mobile-modal-to-Desktop'
    }
    console.log(roomId);
    
    const modal = await this.modalController.create({
      component: GroupMessagesPage,
      cssClass: classs,
      componentProps: {
        roomId: roomId,
      },
    });
    await modal.present();
    modal.onDidDismiss();
  }
}