doneit-web/src/app/ui/chat/modal/messages/messages.page.ts

import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { GestureController, ModalController, NavParams, PopoverController, Platform } from '@ionic/angular';
import { ViewDocumentPage } from 'src/app/modals/view-document/view-document.page';
import { EventPerson } from 'src/app/models/eventperson.model';
import { ExpedientTaskModalPageNavParamsTask } from 'src/app/models/ExpedientTaskModalPage';
import { ContactsPage } from 'src/app/ui/chat/modal/messages/contacts/contacts.page';
import { AlertService } from 'src/app/services/alert.service';
import { FileService } from 'src/app/services/functions/file.service';
import { ToastService } from 'src/app/services/toast.service';
import { ChatMessageStore } from 'src/app/store/chat/chat-message.service';
import { ChatUserStorage } from 'src/app/store/chat/chat-user.service';
import { ThemeService } from 'src/app/services/theme.service'

import { VoiceRecorder, GenericResponse } from 'capacitor-voice-recorder';
import { Haptics, ImpactStyle } from '@capacitor/haptics';
import { ViewEventPage } from 'src/app/modals/view-event/view-event.page';
import { SearchPage } from 'src/app/pages/search/search.page';
import { Storage } from '@ionic/storage';
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
import { DomSanitizer } from '@angular/platform-browser';
import { SessionStore } from 'src/app/store/session.service';
import { ViewMediaPage } from 'src/app/modals/view-media/view-media.page';
import { File } from '@awesome-cordova-plugins/file/ngx';
import { FileOpener } from '@awesome-cordova-plugins/file-opener/ngx';
import { Filesystem, Directory } from '@capacitor/filesystem';
import { FileValidatorService } from "src/app/services/file/file-validator.service"
import { FilePicker } from '@capawesome/capacitor-file-picker';
//======
import { Observable as  DexieObservable } from 'Dexie';
import { Subscription } from 'rxjs';
import { MessageRepositoryService } from 'src/app/module/chat/data/repository/message-respository.service'
import { RoomRepositoryService } from 'src/app/module/chat/data/repository/room-repository.service'
import { MessageTable } from 'src/app/module/chat/infra/database/dexie/schema/message';
import { RoomListItemOutPutDTO } from 'src/app/module/chat/data/dto/room/roomListOutputDTO';
import { UserTypingServiceRepository } from 'src/app/module/chat/data/repository/user-typing-repository.service';
import { ChatServiceService } from 'src/app/module/chat/domain/chat-service.service';
import { EditMessagePage } from 'src/app/modals/edit-message/edit-message.page';
import { MessageEntity } from 'src/app/module/chat/domain/entity/message';
import { MemberTable } from 'src/app/module/chat/infra/database/dexie/schema/members';
import { TypingTable } from 'src/app/module/chat/infra/database/dexie/schema/typing';
import { MessageAttachmentFileType, MessageAttachmentSource } from 'src/app/module/chat/data/dto/message/messageOutputDTO';
import { compressImageBase64 } from 'src/app/utils/imageCompressore';
import { FilePickerService } from 'src/app/infra/file-picker/file-picker.service'
import { RecordingData } from 'capacitor-voice-recorder';
import { Logger } from 'src/app/services/logger/main/service';
import { MessagesOptionsPage } from '../messages-options/messages-options.page';
import { ChatOptionsPopoverPage } from '../chat-options-popover/chat-options-popover.page';

const IMAGE_DIR = 'stored-images';

@Component({
  selector: 'app-messages',
  templateUrl: './messages.page.html',
  styleUrls: ['./messages.page.scss'],
})
export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
  showLoader: boolean;

  @ViewChild('scrollMe') private myScrollContainer: ElementRef;
  /*   @ViewChild('messageContainer') messageContainer: ElementRef; */
  @ViewChild('rectangle') private rectangle: ElementRef;

  canvas: any
  ctx: any
  loggedUser: any;
  userPresence = '';
  dmUsers: any;
  roomId: string;
  el: any;
  members: any;
  scrollingOnce: boolean = true;

  chatMessageStore = ChatMessageStore;
  chatUserStorage = ChatUserStorage;

  private scrollChangeCallback: () => void;
  currentPosition: any;
  startPosition: number;
  scrollToBottomBtn = false;
  attendees: EventPerson[] = [];
  longPressActive = false;
  showMessageOptions = false;
  selectedMsgId: string;

  dicIndex = 0;
  task: ExpedientTaskModalPageNavParamsTask;
  LoadedDocument: any = null;

  recording = false;
  allowTyping = true;
  storedFileNames = [];
  lastAudioRecorded = '';
  audioRecorded: any = "";
  audioDownloaded: any = "";
  durationDisplay = '';
  duration = 0;
  @ViewChild('recordbtn', { read: ElementRef }) recordBtn: ElementRef;
  myAudio: any;
  downloadfile: any;
  downloadFile: any;
  files: any[] = [];
  @ViewChild('filechooser') fileChooserElementRef: ElementRef;
  @ViewChild('array') myInputRef!: ElementRef;

  //items: File[] = [];
  fileSelected?: Blob;
  pdfUrl?: string;
  base64File: string;
  downloadProgess: number;
  downloadLoader: boolean;

  audioPermissionStatus: 'granted' | 'denied' | 'prompt' | null = null
  sessionStore = SessionStore

  roomData$: DexieObservable<RoomListItemOutPutDTO | undefined>
  roomStatus$: DexieObservable<Boolean >
  roomMessage$: DexieObservable<MessageTable[]>
  roomMembers$:  DexieObservable<MemberTable[] | undefined>
  //userTyping$:  DexieObservable<TypingTable[] | undefined>
  userTyping$:  TypingTable[] | undefined
  newMessagesStream!: Subscription

  selectedMessage: any = null;
  emojis: string[] = ['😊', '😂', '❤️', '👍', '😢']; // Add more emojis as needed
  textField = ''


  messageReceiveSubject: Subscription
  messageDeleteSubject: Subscription
  messageUpdateSubject: Subscription
  messageSendSubject: Subscription
  messages1: {[key: string]: MessageEntity[]} = {}

  MessageAttachmentFileType = MessageAttachmentFileType
  MessageAttachmentFileSource = MessageAttachmentSource

  constructor(
    public popoverController: PopoverController,
    private modalController: ModalController,
    private navParams: NavParams,
    private alertService: AlertService,
    private toastService: ToastService,
    private fileService: FileService,
    private gestureController: GestureController,
    public ThemeService: ThemeService,
    private platform: Platform,
    private storage: Storage,
    private sanitiser: DomSanitizer,
    private file: File,
    private fileOpener: FileOpener,
    private FileValidatorService: FileValidatorService,
    private roomRepositoryService: RoomRepositoryService,
    private messageRepositoryService: MessageRepositoryService,
    private userTypingServiceRepository: UserTypingServiceRepository,
    private chatServiceService: ChatServiceService,
    private FilePickerService: FilePickerService,
  ) {


    this.roomId = this.navParams.get('roomId');


    this.roomData$ = this.roomRepositoryService.getItemByIdLive(this.roomId)

    this.getMessages();
    this.listenToIncomingMessage();
    this.listenToDeleteMessage();
    this.listenToUpdateMessage();
    this.listenToSendMessage()


    this.roomMessage$ = this.messageRepositoryService.getItemsLive(this.roomId)
    this.roomMembers$ = this.roomRepositoryService.getRoomMemberByIdLive(this.roomId) as any
    this.roomStatus$ = this.roomRepositoryService.getRoomStatus(this.roomId)
    this.roomRepositoryService.getRoomById(this.roomId)

    this.newMessagesStream?.unsubscribe()
    this.newMessagesStream = this.messageRepositoryService.subscribeToNewMessages(this.roomId).subscribe((e) => {

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

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

    })

    this.userTypingServiceRepository.getUserTypingLive().subscribe((e) => {
      const arrayNames = e.map(e => e.userName)
      this.userTyping$ = e as any

      const uniqueArray = [...new Set(arrayNames)];

      (this.myInputRef.nativeElement as HTMLDivElement).innerHTML = '::'+ uniqueArray
    })

  }

  async getMessages() {

    // dont remove this line
    this.messages1[this.roomId] = []
    let messages = await this.messageRepositoryService.getItems(this.roomId)

    this.messages1[this.roomId] = []
    this.messages1[this.roomId] = messages
    this.loadAttachment()

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

  }

  async loadAttachment() {
    for(const message of this.messages1[this.roomId]) {
      if(message.hasAttachment) {

        const result = await this.chatServiceService.getMessageAttachmentByMessageId({
          $messageId: message.$id,
          id: message.attachments[0].id
        })

        if(result.isOk()) {

          message.attachments[0].safeFile = result.value

        }
      }

    }

  }

  ngOnInit() {}


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

    const longpress = this.gestureController.create({
      el: this.recordBtn.nativeElement,
      threshold: 0,
      gestureName: 'long-press',
      onStart: ev => {
        Haptics.impact({ style: ImpactStyle.Light })
        this.startRecording();
        //this.calculateDuration();
      },
      onEnd: ev => {
        Haptics.impact({ style: ImpactStyle.Light })
        this.stopRecording();
      }
    }, true);
    longpress.enable();
  }

  onDragOver(e?) { }
  onDragLeave(e?) { }

  calculateDuration() {
    if (!this.recording) {
      this.duration = 0;
      this.durationDisplay = '';
      return;
    }
    this.duration += 1;
    const minutes = Math.floor(this.duration / 60);
    const seconds = (this.duration % 60).toString().padStart(2, '0');
    this.durationDisplay = `${minutes}:${seconds}`;

    setTimeout(() => {
      this.calculateDuration();
    }, 1000)
  }



  listenToIncomingMessage() {
    this.messageReceiveSubject?.unsubscribe();
    this.messageReceiveSubject = this.chatServiceService.listenToIncomingMessage(this.roomId).subscribe(async (message) => {
      this.messages1[this.roomId].push(message as MessageEntity)

      if(message.hasAttachment) {

        const result = await this.chatServiceService.getMessageAttachmentByMessageId({
          $messageId: message.$id,
          id: message.attachments[0].id
        })

        if(result.isOk()) {

          message.attachments[0].safeFile = result.value

        }
      }

      setTimeout(() => {
        this.scrollToBottomClicked()
      }, 100)
    });
  }

  listenToDeleteMessage() {
    this.messageDeleteSubject?.unsubscribe();

    this.messageDeleteSubject = this.chatServiceService.listenToDeleteMessage(this.roomId).subscribe((deleteMessage) => {
      const index = this.messages1[this.roomId].findIndex(e => e?.id === deleteMessage.id); // Use triple equals for comparison

      if (index !== -1) { // Check if the item was found
        this.messages1[this.roomId].splice(index, 1);
        // console.log('removed index', index);
      } else {
        // console.log('message not found');
      }
    });
  }

  listenToUpdateMessage() {
    this.messageUpdateSubject?.unsubscribe();

    this.messageUpdateSubject = this.chatServiceService.listenToUpdateMessage(this.roomId).subscribe((updateMessage) => {

      const index = this.messages1[this.roomId].findIndex(e => e?.id === updateMessage.id); // Use triple equals for comparison

      if (index !== -1) { // Check if the item was found
        this.messages1[this.roomId][index].message = updateMessage.message
        this.messages1[this.roomId][index].reactions = updateMessage.reactions
      } else {
        // console.log('message not found');
      }
    });
  }


  listenToSendMessage() {
    this.messageSendSubject?.unsubscribe();

    this.messageSendSubject = this.chatServiceService.listenToSendMessage(this.roomId).subscribe((updateMessage) => {

      const index = this.messages1[this.roomId].findIndex(e => e?.requestId === updateMessage.requestId); // Use triple equals for comparison

      if (index !== -1) { // Check if the item was found

        this.messages1[this.roomId][index].id = updateMessage.id

        let attachmentIndex = 0;

        for(const message of updateMessage.attachments) {
          this.messages1[this.roomId][index].attachments[attachmentIndex].id = message.id
          attachmentIndex++;
        }

      } else {
        // console.log('message not found');
      }
    });
  }

  async loadFiles() {

    this.storage.get('fileName').then((fileName) => {
      this.lastAudioRecorded = fileName;
    })

    try {
      this.storage.get('recordData').then((recordData) => {

        if (recordData?.value?.recordDataBase64.includes('data:audio')) {
          this.audioRecorded = this.sanitiser.bypassSecurityTrustResourceUrl(recordData?.value?.recordDataBase64);
        }
        else if (recordData?.value?.mimeType && recordData?.value?.recordDataBase64) {
          this.audioRecorded = this.sanitiser.bypassSecurityTrustResourceUrl(`data:${recordData.value.mimeType};base64,${recordData?.value?.recordDataBase64}`);
        }
      });
    } catch (error) { }


  }

  async startRecording() {
    VoiceRecorder.requestAudioRecordingPermission();
    if (await VoiceRecorder.canDeviceVoiceRecord().then((result: GenericResponse) => { return result.value })) {
      if (await VoiceRecorder.requestAudioRecordingPermission().then((result: GenericResponse) => { return result.value })) {
        //if(await this.hasAudioRecordingPermission()){
        if (this.recording) {
          return;
        }
        this.recording = true;
        VoiceRecorder.startRecording();
        this.calculateDuration();
        //}
      }
      else {
        this.toastService._badRequest('Para gravar uma mensagem de voz, permita o acesso do Gabinete Digital ao seu microfone.');
      }
    }
    else {
      this.toastService._badRequest('Este dispositivo não tem capacidade para gravação de áudio!');
    }
  }

  stopRecording() {
    this.deleteRecording();
    this.allowTyping = false;

    if (!this.recording) {
      return;
    }
    this.recording = false;
    VoiceRecorder.stopRecording().then(async (result: RecordingData) => {

      this.recording = false;
      if (result.value && result.value.recordDataBase64) {
        const recordData = result.value.recordDataBase64;
        //
        const fileName = new Date().getTime() + ".mp3";
        //Save file
        this.storage.set('fileName', fileName);
        this.storage.set('recordData', result).then(() => {

        })
      }
    })
    setTimeout(async () => {
      this.loadFiles();
    }, 1000);
  }

  async deleteRecording() {
    this.storage.remove('fileName');
    this.storage.remove('recordData');

    this.allowTyping = true;
    this.lastAudioRecorded = '';
    this.loadFiles();
  }



  handlePress(id?: string) {
    this.selectedMsgId = id;
    this.showMessageOptions = true;
  }

  handleClick() {
    this.showMessageOptions = false;
    this.selectedMsgId = "";
  }

  deleteMessage(msgId: string) {}


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

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

  load() {
    this.getChatMembers();
  }

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

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

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

  async goToEvent(event: 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: event.id,
        CalendarId: event.calendarId
      },
      cssClass: classs,
    });
    await modal.present();
    modal.onDidDismiss().then((res) => {

    });
  }

  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) {
    } else {
      this.scrollingOnce = false;
    }
    if ((containerHeight - 100) > scroll) {
      this.scrollToBottomBtn = true;
    }
    else {
      this.scrollToBottomBtn = false;
    }
    this.currentPosition = scroll;

  }

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

  sendMessage() {
    const message = new MessageEntity();
    message.message = this.textField
    message.roomId = this.roomId

    message.sender = {
      userPhoto: '',
      wxeMail: SessionStore.user.Email,
      wxFullName: SessionStore.user.FullName,
      wxUserId: SessionStore.user.UserId
    }

    this.chatServiceService.sendMessage(message)
    this.messages1[this.roomId].push(message)

    this.textField = ''
  }

  async sendAudio(fileName) {
    const roomId = this.roomId
    let audioFile;
    this.storage.get('recordData').then(async (recordData:RecordingData) => {

      audioFile = recordData;
      if (recordData?.value?.recordDataBase64.includes('data:audio')) {
        this.audioRecorded = recordData?.value?.recordDataBase64;
      }
      else if (recordData?.value?.mimeType && recordData?.value?.recordDataBase64) {
        this.audioRecorded = `data:${recordData.value.mimeType};base64,${recordData?.value?.recordDataBase64}`;
      }

      const audioMimeType: string = recordData.value.mimeType
      //Converting base64 to blob
      const encodedData = btoa(this.audioRecorded);

      const message = new MessageEntity();
      message.roomId = this.roomId

      message.sender = {
        userPhoto: '',
        wxeMail: SessionStore.user.Email,
        wxFullName: SessionStore.user.FullName,
        wxUserId: SessionStore.user.UserId
      }

      message.attachments = [{
        file: encodedData,
        fileName: "audio",
        source: MessageAttachmentSource.Device,
        fileType: MessageAttachmentFileType.Audio,
        mimeType: audioMimeType,
        safeFile: this.sanitiser.bypassSecurityTrustResourceUrl(this.audioRecorded)
      }]

      this.messages1[this.roomId].push(message)
      this.chatServiceService.sendMessage(message)
      setTimeout(() => {
        this.scrollToBottomClicked()
      }, 100)

    });
    this.deleteRecording();
  }

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


  docIndex(index: number) {
    this.dicIndex = index
  }

  async openViewDocumentModal(file: any) {

    let task = {
      serialNumber: '',
      taskStartDate: '',
      isEvent: true,
      workflowInstanceDataFields: {
        FolderID: '',
        Subject: file.Assunto,
        SourceSecFsID: file.ApplicationId,
        SourceType: 'PDF',
        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();
  }

  getChatMembers() {}

  showDateDuration(start: any) {
    let end;
    end = new Date();
    start = new Date(start);
    let customizedDate;

    const totalSeconds = Math.floor((end - (start)) / 1000);;
    const totalMinutes = Math.floor(totalSeconds / 60);
    const totalHours = Math.floor(totalMinutes / 60);
    const totalDays = Math.floor(totalHours / 24);

    const hours = totalHours - (totalDays * 24);
    const minutes = totalMinutes - (totalDays * 24 * 60) - (hours * 60);
    const seconds = totalSeconds - (totalDays * 24 * 60 * 60) - (hours * 60 * 60) - (minutes * 60);

    if (totalDays == 0) {
      if (start.getDate() == new Date().getDate()) {
        let time = start.getHours() + ":" + this.addZero(start.getUTCMinutes());
        return time;
      }
      else {
        return 'Ontem';
      }
    }
    else {
      let date = start.getDate() + "/" + (start.getMonth() + 1) + "/" + start.getFullYear();
      return date;
    }
  }

  addZero(i) {
    if (i < 10) {
      i = "0" + i;
    }
    return i;
  }

  async openMessagesOptions(ev?: any) {
    const popover = await this.popoverController.create({
      component: MessagesOptionsPage,
      componentProps: {
        roomId: this.roomId,
      },
      cssClass: 'messages-options',
      event: ev,
      translucent: true,
    });
    return await popover.present();
  }

  async addContacts() {
    const modal = await this.modalController.create({
      component: ContactsPage,
      componentProps: {},
      cssClass: 'contacts',
      backdropDismiss: false
    });



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



  async takePictureMobile() {

    this.addFileToChatMobile()


  }

  dataURItoBlob(dataURI) {
    // convert base64 to raw binary data held in a string
    // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
    var byteString = atob(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

    // write the bytes of the string to an ArrayBuffer
    var ab = new ArrayBuffer(byteString.length);

    // create a view into the buffer
    var ia = new Uint8Array(ab);

    // set the bytes of the buffer to the correct values
    for (var i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
    }

    // write the ArrayBuffer to a blob, and you're done
    var blob = new Blob([ab], { type: mimeString });
    return blob;

  }


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

  async addFileWebtrix() {
    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;
      const roomId = this.roomId

      if (data.selected) {

        const message = new MessageEntity();
        message.message = this.textField
        message.roomId = this.roomId

        message.sender = {
          userPhoto: '',
          wxeMail: SessionStore.user.Email,
          wxFullName: SessionStore.user.FullName,
          wxUserId: SessionStore.user.UserId
        }
        message.attachments = [{
          fileName: res.data.selected.Assunto,
          source: MessageAttachmentSource.Webtrix,
          fileType: MessageAttachmentFileType.Doc,
          applicationId: res.data.selected.ApplicationType,
          docId: res.data.selected.Id,
        }]

        this.messages1[this.roomId].push(message)
        this.chatServiceService.sendMessage(message)
        this.textField = ''

      }
    });
  }

  async pickPicture() {

    const file = await this.FilePickerService.getPicture({
      cameraResultType: CameraResultType.Base64
    })

    if(file.isOk()) {

      var base64 = 'data:image/jpeg;base64,' + file.value.base64String
      if (file.value.format == "jpeg" || file.value.format == "png" || file.value.format == "gif") {

        const compressedImage = await compressImageBase64(
          base64,
          800, // maxWidth
          800, // maxHeight
          0.9  // quality
        )

        if(compressedImage.isOk()) {

          const message = new MessageEntity();
          message.roomId = this.roomId

          message.sender = {
            userPhoto: '',
            wxeMail: SessionStore.user.Email,
            wxFullName: SessionStore.user.FullName,
            wxUserId: SessionStore.user.UserId
          }

          message.attachments = [{
            file: compressedImage.value,
            fileName: "foto",
            source: MessageAttachmentSource.Device,
            fileType: MessageAttachmentFileType.Image,
            mimeType: 'image/'+file.value.format
          }]

          this.messages1[this.roomId].push(message)
          this.chatServiceService.sendMessage(message)
        }
    }

    } else {
      Logger.error('failed to pick picture from the device', {
        error: file.error
      })
    }

  }

  async addFileToChatMobile() {
    const roomId = this.roomId

    const file = await Camera.getPhoto({
      quality: 90,
      // allowEditing: true,
      resultType: CameraResultType.Base64,
      source: CameraSource.Photos
    });

    //const imageData =  await this.fileToBase64Service.convert(file)
    //

    var imageBase64 = 'data:image/jpeg;base64,' + file.base64String


    const compressedImage = await this.compressImageBase64(
      imageBase64,
      800, // maxWidth
      800, // maxHeight
      0.9  // quality
    ).then((picture) => {
      imageBase64 = picture
    });

    //console.log(imageBase64)

    const response = await fetch(imageBase64);
    const blob = await response.blob();

    const formData = new FormData();
    //console.log('add file', formData)
    formData.append("blobFile", blob);
    //console.log('add file', formData)

    // this.ChatSystemService.getDmRoom(roomId).send({
    //   file: {
    //     "type": "application/img",
    //     "guid": ''
    //   },
    //   temporaryData: formData,
    //   attachments: [{
    //     "title": file.path,
    //     "text": "description",
    //     "title_link_download": false,
    //   }],
    //   attachmentsModelData: {
    //     fileBase64: imageBase64,
    //   }
    // })

  }

  getFileReader(): FileReader {
    const fileReader = new FileReader();
    const zoneOriginalInstance = (fileReader as any)["__zone_symbol__originalInstance"];
    return zoneOriginalInstance || fileReader;
  }


  _getBase64(file) {
    return new Promise((resolve, reject) => {
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function () {
        resolve(reader.result)
      };
      reader.onerror = function (error) {
        console.log('Error: ', error);
      };
    })
  }

  async addFileToChat(types) {
    console.log('add file ')
    const roomId = this.roomId

    if (this.platform.is('ios')) {
      console.log('ios add file ')

      const resultt = await FilePicker.pickFiles({
        types: ['application/pdf', 'application/doc', 'application/docx','application/xls', 'application/xlsx', 'application/ppt',
        'application/pptx', 'application/txt'],
        multiple: false,
        readData: true,
      });

      console.log('RESULT', resultt.files[0].data)

      const message = new MessageEntity();
      message.roomId = this.roomId

      message.sender = {
        userPhoto: '',
        wxeMail: SessionStore.user.Email,
        wxFullName: SessionStore.user.FullName,
        wxUserId: SessionStore.user.UserId
      }

      message.attachments = [{
        file: resultt.files[0].data,
        fileName: resultt.files[0].name,
        source: MessageAttachmentSource.Device,
        fileType: MessageAttachmentFileType.Doc
      }]

      this.messages1[this.roomId].push(message)
      this.chatServiceService.sendMessage(message)

      return

    }

    const file = await this.fileService.getFileFromDevice(types);
    console.log(file)


    const fileName = file.name

    const validation = this.FileValidatorService.fileNameValidation(fileName)

    if (validation.isOk) {

      const encodedData = btoa(JSON.stringify(await this.getBase64(file).catch((error) => {
        console.error(error);
      })));
      console.log(encodedData)
      const blob = this.fileService.base64toBlob(encodedData, file.type)

      const formData = new FormData();
      formData.append('blobFile', blob);


      const message = new MessageEntity();
      message.roomId = this.roomId

      message.sender = {
        userPhoto: '',
        wxeMail: SessionStore.user.Email,
        wxFullName: SessionStore.user.FullName,
        wxUserId: SessionStore.user.UserId
      }

      message.attachments = [{
        file: encodedData,
        fileName: file.name,
        source: MessageAttachmentSource.Device,
        fileType: MessageAttachmentFileType.Doc,
        mimeType: file.type
      }]

      this.messages1[this.roomId].push(message)
      this.chatServiceService.sendMessage(message)

    } else {
      this.toastService._badRequest("Ficheiro inválido")
    }

  }

  getBase64(file) {
    var reader = this.getFileReader();
    reader.readAsDataURL(file);
    return new Promise(resolve => {
      reader.onload = function () {
        resolve(reader.result)
      };
      reader.onerror = function (error) {

      };
    });

  }

  async openChatOptions(ev?: any) {
    const roomId = this.roomId


    const popover = await this.popoverController.create({
      component: ChatOptionsPopoverPage,
      cssClass: 'chat-options-popover',
      event: ev,
      componentProps: {
        room: this.roomId,
        members: this.members,
        eventSelectedDate: new Date(),
      },
      translucent: true
    });
    await popover.present();
    popover.onDidDismiss().then(async (res) => {

      if (res['data'] == 'take-picture') {
        this.takePictureMobile()
      }
      else if (res['data'] == 'add-picture') {
        console.log('add-picture')
        this.pickPicture()
      }
      else if (res['data'] == 'add-document') {
        this.addFile()
      }
      else if (res['data'] == 'documentoGestaoDocumental') {

        this.addFileWebtrix()
      }


    });
  }

  isJson(str) {
    try {
      JSON.parse(str);
    } catch (e) {
      return "";
    }
    return JSON.parse(str);
  }



  b64toBlob(b64Data, contentType) {
    contentType = contentType || '';
    var sliceSize = 512;
    b64Data = b64Data.replace(/^[^,]+,/, '');
    b64Data = b64Data.replace(/\s/g, '');
    var byteCharacters = window.atob(b64Data);
    var byteArrays = [];

    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
      var slice = byteCharacters.slice(offset, offset + sliceSize);

      var byteNumbers = new Array(slice.length);
      for (var i = 0; i < slice.length; i++) {
        byteNumbers[i] = slice.charCodeAt(i);
      }

      var byteArray = new Uint8Array(byteNumbers);

      byteArrays.push(byteArray);
    }

    var blob = new Blob(byteArrays, { type: contentType });
    return blob;
  }

  blobToBase64(blob) {
    return new Promise((resolve, _) => {
      const reader = new FileReader();
      reader.onloadend = () => resolve(reader.result);
      reader.readAsDataURL(blob);
    });
  }

  async openFile(pdfString, filename, type) {

    console.log('url while open ',pdfString)

    /* const modal = await this.modalController.create({
      component: ViewDocumentSecondOptionsPage,
      componentProps: {
        fileUrl: pdfString,
        filename: filename
      },
      cssClass: 'modal modal-desktop'
    });
    await modal.present();
/*
    await modal.present(); */

    var blob = new Blob([pdfString], { type: 'application/pdf' });

    console.log('blob blob', blob)

    this.blobToBase64(blob).then((value) => {
      console.log(value)
    }).catch((error) => {
      console.log(error)
    })

    let pathFile = ''
    const fileName = filename
    if (this.platform.is('ios')) {
      pathFile = this.file.documentsDirectory
    } else {
      pathFile = this.file.externalRootDirectory
    }

    console.log('file data', pdfString)
    console.log(pathFile)

    let removePre = this.removeTextBeforeSlash(pdfString,',')
    console.log('file data remove ', removePre)

    await Filesystem.writeFile({
      path: fileName,
      data: removePre,
      directory: Directory.Cache,
    }).then((dir) => {
      console.log('DIR ', dir)
      this.fileOpener
        .open(dir.uri, type)
        .then(() => console.log())
        .catch(e => console.error(e))
    }).catch((error) => {
      console.log('error writing the file', error)
    });
  }

  removeTextBeforeSlash(inputString, controlString) {
    if (inputString.includes(controlString)) {
      const parts = inputString.split(controlString);
      return parts.length > 1 ? parts[1] : inputString;
    } else {
      return inputString;
    }
  }

  downloadFileFromBrowser(fileName: string, data: any): void {
    const linkSource = data;
    const downloadLink = document.createElement("a");
    downloadLink.href = linkSource;
    downloadLink.download = fileName;
    downloadLink.click();
  }


  async openPreview(msg) {

    if (msg.file.type === "application/webtrix") {
      this.viewDocument(msg.file, msg.attachments.image_url)
    } else {

      if (!msg.attachments[0].image_url || msg.attachments[0].image_url === null || msg.attachments[0].image_url === '') {
        // this.downloadFileMsg(msg)
        // this.testDownlod(msg)

      } else {
        var str = msg.attachments[0].image_url;
        str = str.substring(1, ((str.length) - 1));

        if (this.platform.is('desktop') || this.platform.is('mobileweb')) {

          console.log(msg)

          if (msg.file.type == "application/img") {
            const modal = await this.modalController.create({
              component: ViewMediaPage,
              cssClass: 'modal modal-desktop',
              componentProps: {
                image: msg.attachments[0].image_url,
                type: msg.file.type,
                username: msg.u.name,
                _updatedAt: msg._updatedAt
              }
            });
            modal.present();
          } else {

            this.downloadFileFromBrowser("file", str)
            this.downloadFileFromBrowser(msg.attachments[0].title, str)

            this.downloadFileFromBrowser(msg.attachments[0].title, str)

          }

        } else {
          if (msg.file.type == "application/img") {
            const modal = await this.modalController.create({
              component: ViewMediaPage,
              cssClass: 'modal modal-desktop',
              componentProps: {
                image: msg.attachments[0].image_url,
                type: msg.file.type,
                username: msg.u.name,
                _updatedAt: msg._updatedAt
              }
            });
            modal.present();
          } else {
            this.openFile(msg.attachments[0].image_url, msg.attachments[0].title, msg.file.type);
          }
        }

      }
    }

  }

  imageSize(img) {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    canvas.width = 300
    canvas.height = 234
    ctx.drawImage(img.attachments[0].image_url, 0, 0, 300, 234);
    document.body.appendChild(canvas);
  }

  getPicture(img) {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    canvas.width = 300
    canvas.height = 234
    ctx.drawImage(img.attachments[0].image_url, 0, 0, 300, 234);
    document.body.appendChild(canvas);

  }

  async compressImageBase64(base64String: string, maxWidth: number, maxHeight: number, quality: number): Promise<string> {
    return new Promise((resolve, reject) => {
      const image = new (window as any).Image();
      image.src = base64String;

      image.onload = async () => {
        const canvas = document.createElement('canvas');
        let newWidth = image.width;
        let newHeight = image.height;

        if (newWidth > maxWidth) {
          newHeight *= maxWidth / newWidth;
          newWidth = maxWidth;
        }

        if (newHeight > maxHeight) {
          newWidth *= maxHeight / newHeight;
          newHeight = maxHeight;
        }

        canvas.width = newWidth;
        canvas.height = newHeight;

        const context = canvas.getContext('2d');
        context?.drawImage(image, 0, 0, newWidth, newHeight);

        const compressedBase64 = canvas.toDataURL('image/jpeg', quality);
        resolve(compressedBase64);
      };

      image.onerror = (error) => {
        reject(error);
      };
    });
  }

  dataURItoBlobIso(dataURI: any) {
    const byteString = window.atob(dataURI);
    const arrayBuffer = new ArrayBuffer(byteString.length);
    const int8Array = new Uint8Array(arrayBuffer);
    for (let i = 0; i < byteString.length; i++) {
      int8Array[i] = byteString.charCodeAt(i);
    }
    const blob = new Blob([int8Array], { type: 'application/pdf' });
    return blob;
  }


  messageDelete(message: MessageEntity) {
    this.chatServiceService.messageDelete({
      messageId: message.id,
      roomId: this.roomId,
    })
  }

  async editMessage(message: any) {

    const modal = await this.modalController.create({
      component: EditMessagePage,
      cssClass: '',
      componentProps: {
        message: message.message,
        roomId: this.roomId,
      }
    });

    modal.present()

    return modal.onDidDismiss().then((res) => {

      this.chatServiceService.updateMessage({
        memberId: SessionStore.user.UserId,
        message: res.data.message,
        messageId:  message.id,
        requestId: '',
        roomId: this.roomId
      })
    });
  }

  toggleEmojiPicker(message: any) {
    if (this.selectedMessage === message) {
      this.selectedMessage = null; // Close the picker if it's already open
    } else {
      this.selectedMessage = message; // Open the picker for the selected message
    }
  }

  addReaction(message: any, emoji: string) {
    // Logic to add reaction to the message
    console.log(`Reacting to message ${message.id} with emoji ${emoji.codePointAt(0).toString(16)}`);
    this.selectedMessage = null; // Close the picker after adding reaction

    this.chatServiceService.reactToMessage({
      memberId: SessionStore.user.UserId,
      messageId: message.id,
      roomId: this.roomId,
      reaction: emoji,
      requestId: ''
    })

  }

  sendTyping() {
    this.userTypingServiceRepository.addUserTyping(this.roomId)
  }
}