doneit-web/src/app/shared/chat/group-messages/group-messages.page.ts

import { Component, OnChanges, OnInit, Input, SimpleChanges, Output, EventEmitter} from '@angular/core';
import { ActionSheetController, AnimationController, MenuController, ModalController, PopoverController } from '@ionic/angular';
import { AlertService } from 'src/app/services/alert.service';
import { AuthService } from 'src/app/services/auth.service';
import { ChatService } from 'src/app/services/chat.service';
import { ChatOptionsPopoverPage } from 'src/app/shared/popover/chat-options-popover/chat-options-popover.page';
import { ChatPopoverPage } from 'src/app/shared/popover/chat-popover/chat-popover.page';
import { ContactsPage } from '../new-group/contacts/contacts.page';
import { NewGroupPage } from '../new-group/new-group.page';
import { GroupContactsPage } from './group-contacts/group-contacts.page';

@Component({
  selector: 'app-group-messages',
  templateUrl: './group-messages.page.html',
  styleUrls: ['./group-messages.page.scss'],
})
export class GroupMessagesPage implements OnInit, OnChanges {
  showLoader: boolean;
  isGroupCreated:boolean;
  loggedUser: any;
  message:any;
  leaveStatus:any;
  messages:any;
  

  room:any;
  roomName:any;
  members:any;

  @Input() roomId:string;
  @Output() closeAllDesktopComponents:EventEmitter<any> = new EventEmitter<any>();
  @Output() showEmptyContainer:EventEmitter<any> = new EventEmitter<any>();
  @Output() openGroupContacts:EventEmitter<any> = new EventEmitter<any>();
  @Output() openEditGroupPage:EventEmitter<any> = new EventEmitter<any>();

  constructor(
    private menu: MenuController,
    private modalController: ModalController,
    private actionSheetController: ActionSheetController,
    public popoverController: PopoverController,
    private chatService: ChatService,
    private authService: AuthService,
    private animationController: AnimationController,
    private alertService: AlertService,
  ) {
    this.isGroupCreated = true;
  }
  ngOnChanges(changes: SimpleChanges): void {
    this.getRoomInfo();
  }

  ngOnInit() {
    this.authService.userData$.subscribe((res:any)=>{
      this.loggedUser=res;
      console.log(this.loggedUser); 
    });
    this.getRoomInfo();
    console.log(this.roomId);
  }

  notImplemented(){
    this.alertService.presentAlert('Funcionalidade em desenvolvimento');
  }

  openGroupContactsPage(){
    this.openGroupContacts.emit(this.roomId);
  }

  close(){
    this.modalController.dismiss();
  }

  doRefresh(ev:any){
    this.getRoomInfo();
    ev.target.complete();
  }
  get watch(){
    this.getRoomInfo();
    console.log('here watching');
    
    return this.roomId;
  }
  getRoomInfo(){
    this.showLoader = true;
    this.chatService.getRoomInfo(this.roomId).subscribe(room=>{
      this.room = room['room'];
      this.roomName = this.room.name.split('-').join(' ');
      this.getGroupContacts(this.room);
      this.loadGroupMessages(this.room);
      this.showLoader = false;
    });
  }

  getGroupContacts(room:any){
    this.showLoader = true;
    //If group is private call getGroupMembers
    if(room.t === 'p'){
      this.chatService.getGroupMembers(this.roomId).subscribe(res=>{
        console.log(res);
        this.members = res['members'];
        this.showLoader = false;
      });
    }
    //Otherwise call getChannelMembers for públic groups
    else{
      this.chatService.getChannelMembers(this.roomId).subscribe(res=>{
        console.log(res);
        this.members = res['members'];
        this.showLoader = false;
      });
    }
  }
  loadGroupMessages(room:any){
    console.log('here'+room.t);
    
    this.showLoader = true;
    //If group is private call getGroupMembers
    if(room.t === 'p'){
      console.log('private');
      
      this.chatService.getPrivateGroupMessages(this.roomId).subscribe(res=>{
        console.log(res);
        let msgOnly = res['messages'].filter(data => data.t != 'au');
        this.messages = msgOnly.reverse();
        console.log(res);
        
        this.showLoader = false;
      });
    }
    //Otherwise call getChannelMembers for públic groups
    else{
      this.chatService.getPublicGroupMessages(this.roomId).subscribe(res=>{
        console.log(res);
        this.messages = res['messages'].reverse();
      });
    }
  }
  sendMessage(){

    let body = {
      "message": 
      { 
        "rid": this.roomId, "msg": this.message 
      }
    }
    
    this.chatService.sendMessage(body).subscribe(res=> {
     /*  this.loadGroupMessages(); */ 
     this.getRoomInfo();
    });
    this.message = "";
  }
  async openGroupMessagesOptions() {

    const enterAnimation = (baseEl: any) => {
      const backdropAnimation = this.animationController.create()
        .addElement(baseEl.querySelector('ion-backdrop')!)
        .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');

      const wrapperAnimation = this.animationController.create()
        .addElement(baseEl.querySelector('.modal-wrapper')!)
        .keyframes([
          { offset: 0, opacity: '1', right: '-100%' },
          { offset: 1, opacity: '1', right: '0px' }
        ]);

      return this.animationController.create()
        .addElement(baseEl)
        .easing('ease-out')
        .duration(500)
        .addAnimation([backdropAnimation, wrapperAnimation]);
    }

    const leaveAnimation = (baseEl: any) => {
      return enterAnimation(baseEl).direction('reverse');
    }
 

    /* const popover = await this.popoverController.create({
      component: MessagesOptionsPage,
      componentProps: {
        roomId: this.dm._id,
      },
      cssClass: 'messages-options',
      event: ev,
      translucent: true,
    });
    return await popover.present(); */

    const modal = await this.modalController.create({
      enterAnimation,
      leaveAnimation,
      component: ChatPopoverPage,
      cssClass: 'model profile-modal search-submodal',
      componentProps: {
        roomId: this.roomId,
      }
    });
    await modal.present();
    modal.onDidDismiss().then(res=>{
      console.log(res);
      if(res.data == 'leave'){
        this.leaveStatus = this.loggedUser.me.name + ' saiu do grupo';
      }
      else if(res.data == 'delete'){
        this.closeAllDesktopComponents.emit();
        this.showEmptyContainer.emit();
      }
      else if(res.data == 'cancel'){
        console.log('CANCEL');
      }
      else if(res.data == 'edit'){
        console.log(this.roomId);
        //this.closeAllDesktopComponents.emit();
        this.openEditGroupPage.emit(this.roomId);
      }
      else{
        this.roomName = res.data.name.split('-').join(' ');
        console.log(this.roomName);
        
        this.getRoomInfo();
        //this.modalController.dismiss();
      };
      
    });
  }

  openSendGroupMessageOptions(ev: any){
    if(window.innerWidth <= 1024){
      console.log('mobile');
      this.openChatOptions(ev);
    }
    else{
      console.log('desktop');
      this._openChatOptions();
    }
  }


  async openOptions(ev: any) {
    const popover = await this.popoverController.create({
      component: ChatPopoverPage,
      cssClass: 'chat-popover',
      event: ev,
      componentProps: {
        room: this.room,
      },
      translucent: true
    });
    await popover.present();
    popover.onDidDismiss().then(res=>{
      console.log(res);
      if(res.data){
        this.getRoomInfo();
        //this.modalController.dismiss(); 
      };
      
    });
  }
  async openChatOptions(ev: any) {
    const popover = await this.popoverController.create({
      component: ChatOptionsPopoverPage,
      cssClass: 'chat-options-popover',
      event: ev,
      componentProps: {
        room: this.room,
      },
      translucent: true
    });
    return await popover.present();
  }
  async addContacts(){
    console.log(this.members);
  
    const modal = await this.modalController.create({
      component: GroupContactsPage,
      componentProps: {
        isCreated: this.isGroupCreated,
        room: this.room,
        members: this.members,
        name: this.room.name,
      }, 
      cssClass: 'contacts',
      backdropDismiss: false
    });

    await modal.present();

    modal.onDidDismiss().then(()=>{
      this.getRoomInfo();
    });
  }

  /* async actionSheet() {
    const actionSheet = await this.actionSheetController.create({
      cssClass: 'my-custom-class',
      buttons: [{
        text: 'Sair do grupo',
        handler: () => {
          console.log('Delete clicked');
        }
      }, {
        text: 'Alterar nome do grupo1',
        handler: () => {
          console.log('Alterar nome do grupo');
          this.openChangeGroupName()
        }
      }, {
        text: 'Apagar o grupo',
        handler: () => {
          console.log('Play clicked');
        }
      }, 
      ]
    });
    await actionSheet.present();
  }
 */

  async _openChatOptions() {

    const enterAnimation = (baseEl: any) => {
      const backdropAnimation = this.animationController.create()
        .addElement(baseEl.querySelector('ion-backdrop')!)
        .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');

      const wrapperAnimation = this.animationController.create()
        .addElement(baseEl.querySelector('.modal-wrapper')!)
        .keyframes([
          { offset: 0, opacity: '1', right: '-100%' },
          { offset: 1, opacity: '1', right: '0px' }
        ]);

      return this.animationController.create()
        .addElement(baseEl)
        .easing('ease-out')
        .duration(500)
        .addAnimation([backdropAnimation, wrapperAnimation]);
    }

    const leaveAnimation = (baseEl: any) => {
      return enterAnimation(baseEl).direction('reverse');
    }

    const modal = await this.modalController.create({
      enterAnimation,
      leaveAnimation,
      component: ChatOptionsPopoverPage,
      cssClass: 'model profile-modal search-submodal',
      componentProps: {
        roomId: this.roomId,
      }
    });
    return await modal.present();
  }

}