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

import { Component, OnChanges, OnInit, Input, SimpleChanges, ChangeDetectorRef, Output, EventEmitter, ViewChild, ElementRef, AfterViewChecked, AfterViewInit, OnDestroy } from '@angular/core';
import { ActionSheetController, AnimationController, IonSlides, 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 { 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';
import { Router } from '@angular/router'
import { ChatOptionsPopoverPage } from '../../popover/chat-options-popover/chat-options-popover.page';
import { ChatOptionsFeaturesPage } from 'src/app/modals/chat-options-features/chat-options-features.page';
import { TimeService } from 'src/app/services/functions/time.service';
import { FileLoaderService } from 'src/app/services/file/file-loader.service';
import { FileToBase64Service } from 'src/app/services/file/file-to-base64.service';
import { SearchPage } from 'src/app/pages/search/search.page';
import { SearchList } from 'src/app/models/search-document';
import { ProcessesService } from 'src/app/services/processes.service';
import { FileService } from 'src/app/services/functions/file.service';
import { ViewDocumentPage } from 'src/app/modals/view-document/view-document.page';
import { ThemeService } from 'src/app/services/theme.service'
import { PreviewCameraPage } from 'src/app/modals/preview-camera/preview-camera.page';
import { ViewMediaPage } from 'src/app/modals/view-media/view-media.page';
import { ViewEventPage } from 'src/app/modals/view-event/view-event.page';
import { HttpEventType } from '@angular/common/http';
import { Storage } from '@ionic/storage';
import { WsChatMethodsService } from 'src/app/services/chat/ws-chat-methods.service';
import { MessageService } from 'src/app/services/chat/message.service';
import { AttachmentsService } from 'src/app/services/attachments.service';

import { CameraService } from 'src/app/services/camera.service';
import { element } from 'protractor';
import { FileType } from 'src/app/models/fileType';
import { ToastService } from 'src/app/services/toast.service';
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';

/*
import * as pdfjsLib from 'pdfjs-dist';
if( pdfjsLib !== undefined ){
  console.log( "set worker...");
   pdfjsLib.GlobalWorkerOptions.workerSrc = "https://npmcdn.com/pdfjs-dist@2.4.456/build/pdf.worker.js";
}
*/

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


  room: any = new Array();
  roomName: any;
  members: any;

  capturedImage: any;
  capturedImageTitle: any;

  loggedUserChat: any;
  scrollingOnce: boolean = true;
  private scrollChangeCallback: () => void;
  currentPosition: any;
  startPosition: number;
  scrollToBottomBtn = false;
  roomCountDownDate: string;
  roomCountDownTime: string;

  @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>();
  @Output() openNewEventPage: EventEmitter<any> = new EventEmitter<any>();
  @Output() getGroups: EventEmitter<any> = new EventEmitter<any>();

  @ViewChild('scrollMe') private myScrollContainer: ElementRef;

  pdfurl = "http://www.africau.edu/images/default/sample.pdf";
  downloadFile: any;

  constructor(
    public wsChatMethodsService: WsChatMethodsService,
    private modalController: ModalController,
    public popoverController: PopoverController,
    private chatService: ChatService,
    private authService: AuthService,
    private animationController: AnimationController,
    private alertService: AlertService,
    private route: Router,
    private timeService: TimeService,
    private fileLoaderService: FileLoaderService,
    private fileToBase64Service: FileToBase64Service,
    private processesService: ProcessesService,
    private fileService: FileService,
    public ThemeService: ThemeService,
    private changeDetectorRef: ChangeDetectorRef,
    private storage: Storage,
    private AttachmentsService: AttachmentsService,

    private CameraService: CameraService,
    private toastService: ToastService,

  ) {
    console.log('OnCONSTRUCTOR');
    this.loggedUserChat = authService.ValidatedUserChat['data'];
    this.isGroupCreated = true;
    this.roomCountDownDate = "";
    this.roomCountDownTime = "";

  }
  ngOnChanges(changes: SimpleChanges): void {
    console.log('OnCHANGES');

    this.getRoomInfo();
    //this.scrollToBottom();
    this.wsChatMethodsService.getGroupRoom(this.roomId).loadHistory();
    // console.log('MESSAGES'+ this.wsChatMethodsService.getGroupRoom(this.roomId).messages);
    this.wsChatMethodsService.openRoom(this.roomId)
    this.wsChatMethodsService.getGroupRoom(this.roomId).scrollDown = this.scrollToBottomClicked

    setTimeout(()=>{
      this.scrollToBottomClicked()
    }, 50)

  }

  ngOnInit() {
    console.log(this.roomId);
    this.loggedUser = this.loggedUserChat;

    this.loggedUser=this.loggedUserChat;
    setTimeout(() => {
      this.getRoomInfo();
    }, 1000);
    this.getChatMembers();
    //this.getMessageDB();

  }

  showDateDuration(start: any) {
    return this.timeService.showDateDuration(start);
  }

  countDownDate() {
    //this.roomCountDownTime = this.timeService.countDownDateTimer(this.roomCountDownDate, this.room._id);
    return this.timeService.countDownDateTimer(this.roomCountDownDate, this.roomId);
  }

  setStatus(status: string) {
    let body = {
      message: '',
      status: status,
    }
    this.chatService.setUserStatus(body).subscribe(res => {
      //console.log(res);
    })
  }

  scrollToBottom(): void {
    try {
      if (this.scrollingOnce) {
        this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
      }
    } catch (err) { }
  }

  scrollToBottomClicked = () => {
    try {
      this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
    } catch (err) { }
  }

  async goToEvent(eventId: any) {
    let classs;
    if (window.innerWidth < 701) {
      classs = 'modal modal-desktop'
    } else {
      classs = 'modal modal-desktop showAsideOptions'
    }

    const modal = await this.modalController.create({
      component: ViewEventPage,
      componentProps: {
        eventId: eventId,
      },
      cssClass: classs,
    });
    await modal.present();
    modal.onDidDismiss().then((res) => {
      console.log(res);
    });
  }

  ngAfterViewInit() {
    this.scrollChangeCallback = () => this.onContentScrolled(event);
    window.addEventListener('scroll', this.scrollChangeCallback, true);
  }

  onContentScrolled(e) {
    this.startPosition = e.srcElement.scrollTop;
    let scroll = e.srcElement.scrollTop;
    let windowHeight = e.srcElement.scrollHeight;
    let containerHeight = windowHeight - e.srcElement.clientHeight;

    if (scroll > this.currentPosition) {
      //alert('BOTTOM');
    } else {
      //alert('UP');
      this.scrollingOnce = false;
    }
    if ((containerHeight - 100) > scroll) {
      this.scrollToBottomBtn = true;
    }
    else {
      this.scrollToBottomBtn = false;
    }
    this.currentPosition = scroll;
  }

  ngOnDestroy() {
    window.removeEventListener('scroll', this.scrollChangeCallback, true);
  }


  changeInput() {
    this.wsChatMethodsService.getDmRoom(this.roomId).typing()
  }

  async getChatMembers() {
    //return await this.chatService.getMembers(roomId).toPromise();
    this.chatService.getAllUsers().subscribe(res => {
      //console.log(res);

      this.allUsers = res['users'].filter(data => data.username != this.loggedUserChat.me.username);
      //console.log(this.allUsers);
    });
  }

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

  openBookMeetingComponent() {
    let data = {
      roomId: this.roomId,
      members: this.members
    }
    this.openNewEventPage.emit(data);
  }

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

  doRefresh(ev: any) {
    this.getRoomInfo();
    ev.target.complete();
  }

  get watch() {
    this.getRoomInfo();
    console.log('here watching');
    return this.roomId;
  }

  async getRoomInfo() {
    this.wsChatMethodsService.getGroupRoom(this.roomId).loadHistory();
    let room = await this.chatService.getRoomInfo(this.roomId).toPromise();
    this.room = room['room'];
    if (this.room.name) {
      this.roomName = this.room.name.split('-').join(' ');
    }

    if (this.room.customFields.countDownDate) {
      this.roomCountDownDate = this.room.customFields.countDownDate;
    }

    this.getGroupContacts(this.room);
  }

  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;
      });
    }
  }

  sendMessage() {
    this.wsChatMethodsService.getGroupRoom(this.roomId).send({})
  }

  deleteMessage(msgId: string, room:any) {
    this.alertService.confirmDeleteMessage(msgId, room);
  }

  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(); */

    console.log(this.roomId);


    const modal = await this.modalController.create({
      enterAnimation,
      leaveAnimation,
      component: ChatPopoverPage,
      cssClass: 'model profile-modal search-submodal',
      componentProps: {
        roomId: this.roomId,
        members: this.members,
      }
    });
    await modal.present();
    modal.onDidDismiss().then(res => {
      console.log(res);
      if (res.data == 'leave') {
        this.getRoomInfo();
        this.wsChatMethodsService.hidingRoom(this.roomId);
        this.closeAllDesktopComponents.emit();
        this.showEmptyContainer.emit();
      }
      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);
      };

    });
  }

  openSendGroupMessageOptions(ev?: any) {
    if (window.innerWidth <= 701) {
      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 modal-desktop',
      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,
        members: this.members,
      },
      translucent: true
    });
    await popover.present();
    await popover.onDidDismiss().then(() => {
    });
  }
  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 addDocGestaoDocumental() {
    const modal = await this.modalController.create({
      component: SearchPage,
      cssClass: 'group-messages modal-desktop search-modal search-modal-to-desktop',
      componentProps: {
        type: 'AccoesPresidenciais & ArquivoDespachoElect',
        select: true,
        showSearchInput: true,
      }
    });
    await modal.present();
    modal.onDidDismiss().then(async res => {
      if (res) {
        const data = res.data;
        this.documents.push(data.selected);

        this.addFileWebtrix()
      }
    });
  }

  viewDocument(file: any, url?: string) {
    if (file.type == "application/webtrix") {
      this.openViewDocumentModal(file);
    }
    else {
      let fullUrl = "https://www.tabularium.pt" + url;
      this.fileService.viewDocumentByUrl(fullUrl);
    }
  }

  async openViewDocumentModal(file: any) {
    let task = {
      serialNumber: '',
      taskStartDate: '',
      isEvent: true,
      workflowInstanceDataFields: {
        FolderID: '',
        Subject: file.Assunto,
        SourceSecFsID: file.ApplicationId,
        SourceType: 'DOC',
        SourceID: file.DocId,
        DispatchNumber: ''
      }
    }

    let doc = {
      "Id": "",
      "ParentId": "",
      "Source": 1,
      "ApplicationId": file.ApplicationId,
      "CreateDate": "",
      "Data": null,
      "Description": "",
      "Link": null,
      "SourceId": file.DocId,
      "SourceName": file.Assunto,
      "Stakeholders": "",
    }

    const modal = await this.modalController.create({
      component: ViewDocumentPage,
      componentProps: {
        trustedUrl: '',
        file: {
          title: file.Assunto,
          url: '',
          title_link: '',
        },
        Document: doc,
        applicationId: file.ApplicationId,
        docId: file.DocId,
        folderId: '',
        task: task
      },
      cssClass: 'modal modal-desktop'
    });
    await modal.present();
  }

  async takePictureMobile() {
    const roomId = this.roomId

    const file = await Camera.getPhoto({
      quality: 90,
      // allowEditing: true,
      resultType: CameraResultType.Base64,
      source: CameraSource.Camera
    });
    console.log('ADDFILECHAT', file)
    //const imageData =  await this.fileToBase64Service.convert(file)
    //console.log('ADDFILECHAT', imageData)

    const response = await fetch('data:image/jpeg;base64,'+ file.base64String!);
    const blob = await response.blob();

    const formData = new FormData();
    formData.append("blobFile", blob);
    
    this.wsChatMethodsService.getDmRoom(roomId).send({
      file: {
        "type": "application/img",
        "guid": '',
      },
      temporaryData: formData,
      attachments: [{
        "title": file.path ,
        "image_url": 'data:image/jpeg;base64,' +file.base64String,
        "text": "description",
        "title_link_download": false,
      }]
    })

  }

  async takePicture() {
    const roomId = this.roomId

    const image = await this.CameraService.takePicture();
    await this.fileService.saveImage(image)
    const lastphoto: any = await this.fileService.loadFiles();
    const { capturedImage, capturedImageTitle} = await this.fileService.loadFileData(lastphoto);

    const base64 = await fetch(capturedImage);
    const blob = await base64.blob();
    const formData = new FormData();
    formData.append("blobFile", blob);

    this.wsChatMethodsService.getGroupRoom(roomId).send({
      file: {
        "type": "application/img",
        "guid": ''
      },
      attachments: [{
        "title": capturedImageTitle ,
        "image_url": capturedImage,
        "text": "description",
        "title_link_download": false,
      }],
      temporaryData: formData
    })

  }

  async addImage() {
    this.addFileToChat(['image/apng', 'image/jpeg', 'image/png'])
  }

  async addFile() {
    this.addFileToChat(['.doc', '.docx', '.pdf'])
  }

  async addFileWebtrix() {
    const roomId = this.roomId

    const modal = await this.modalController.create({
      component: SearchPage,
      cssClass: 'group-messages modal-desktop search-modal search-modal-to-desktop',
      componentProps: {
        type: 'AccoesPresidenciais & ArquivoDespachoElect',
        select: true,
        showSearchInput: true,
      }
    });
    await modal.present();
    modal.onDidDismiss().then(async res=>{
      const data = res.data;

      if(data.selected) {
        const loader = this.toastService.loading();

        this.wsChatMethodsService.getGroupRoom(roomId).send({
          file:{
            "name": res.data.selected.Assunto,
            "type": "application/webtrix",
            "ApplicationId": res.data.selected.ApplicationType,
            "DocId": res.data.selected.Id,
            "Assunto": res.data.selected.Assunto,
          },
          attachments: [{
            "title": res.data.selected.Assunto,
            "description": res.data.selected.DocTypeDesc,
            // "title_link": url_no_options,
            "title_link_download": true,
            //"thumb_url": "assets/images/webtrix-logo.png",
            // "message_link": url_no_options,
            "type": "webtrix",
            //"thumb_url": "assets/images/webtrix-logo.png",
            "text": res.data.selected.DocTypeDesc,
            "thumb_url": "https://static.ichimura.ed.jp/uploads/2017/10/pdf-icon.png",
          }],
          temporaryData: res
        })

        loader.remove();

      }
    });
  }



  async addFileToChat(types: typeof FileType[] ) {
    const roomId = this.roomId

    const file: any = await this.fileService.getFileFromDevice(types);
    const imageData =  await this.fileToBase64Service.convert(file)

    const formData = new FormData();
    formData.append("blobFile", file);

    this.wsChatMethodsService.getGroupRoom(roomId).send({
      file: {
        "type": "application/img",
        "guid": ''
      },
      temporaryData: formData,
      attachments: [{
        "title": file.name ,
        "image_url": imageData,
        "text": "description",
        "title_link_download": false,
      }]
    })
  }

  bookMeeting() {
    let data = {
      roomId: this.roomId,
      members: this.members
    }
    this.openNewEventPage.emit(data);
  }

  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: ChatOptionsFeaturesPage,
      cssClass: 'model profile-modal search-submodal',
      componentProps: {
        roomId: this.roomId,
        members: this.members,
      }
    });
    await modal.present();
    modal.onDidDismiss().then( async (res) => {
      console.log(res['data']);
      const roomId = this.roomId;

      if (res['data'] == 'meeting') {
        //this.closeAllDesktopComponents.emit();
        let data = {
          roomId: this.roomId,
          members: this.members
        }
        this.openNewEventPage.emit(data);
      }
      else if (res['data'] == 'take-picture') {

        this.takePicture()

      }
      else if (res['data'] == 'add-picture') {

        this.addImage()

      }
      else if (res['data'] == 'add-document') {

        this.addFile()

      }
      else if (res['data'] == 'documentoGestaoDocumental') {

        this.addFileWebtrix()

        this.showLoader = false;
      }

    });
  }


  downloadFileMsg(msg: MessageService) {
    console.log('FILE TYPE', msg.file.type)
    this.downloadFile = "";
    if (msg.file.type == "application/img") {
      this.AttachmentsService.downloadFile(msg.file.guid).subscribe(async (event) => {
        console.log('FILE TYPE 22', msg.file.guid)
        var name = msg.file.guid;

        if (event.type === HttpEventType.DownloadProgress) {
          //this.downloadProgess = Math.round((100 * event.loaded) / event.total);
          console.log('FILE TYPE 33', msg.file.type)
        } else if (event.type === HttpEventType.Response) {
          this.downloadFile = 'data:image/jpeg;base64,' + btoa(new Uint8Array(event.body).reduce((data, byte) => data + String.fromCharCode(byte), ''));

          msg.file = {
            guid: msg.file.guid,
            image_url: this.downloadFile,
            type: msg.file.type
          }

          await this.storage.set(msg.file.guid, this.downloadFile).then(() => {
            console.log('IMAGE SAVED')
          });
        }

      });

    }

  }

  async openPreview(msg) {

    if (msg.file.image_url === null || msg.file.image_url  === '' ) {
      this.downloadFileMsg(msg)

    } else {
      const modal = await this.modalController.create({
        component: ViewMediaPage,
        cssClass: 'modal modal-desktop',
        componentProps: {
          image: msg.file.image_url,
          username: msg.u.name,
          _updatedAt: msg._updatedAt
        }
      });
      modal.present();
    }

  }

}