doneit-web/src/app/shared/publication/new-publication/new-publication.page.ts

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { SafeResourceUrl } from '@angular/platform-browser';
import { PublicationsService } from 'src/app/services/publications.service';
import { Publication } from 'src/app/models/publication';
import { Image } from 'src/app/models/image';
import { PhotoService } from 'src/app/services/photo.service';
import { ToastService } from 'src/app/services/toast.service';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { ThemeService } from 'src/app/services/theme.service';
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
import { HttpErrorHandle } from 'src/app/services/http-error-handle.service';
import { PublicationFolderService } from 'src/app/store/publication-folder.service';
import { FilePicker } from '@capawesome/capacitor-file-picker';
import { Directory, Encoding, Filesystem } from '@capacitor/filesystem';
import { utf8Encode } from '@angular/compiler/src/util';
import { checkFileTypeService } from 'src/app/services/checkFileType.service';
import { FileValidatorService } from "src/app/services/file/file-validator.service"

@Component({
  selector: 'app-new-publication',
  templateUrl: './new-publication.page.html',
  styleUrls: ['./new-publication.page.scss'],
})
export class NewPublicationPage implements OnInit {
  showLoader: boolean;
  pub: Publication = new Publication();

  publicationTitle: string;
  imgUrl: any;

  Defaultimage: any = '';

  Form: FormGroup;
  validateFrom = false


  @Input() publication!: Publication;
  @Input() publicationType: string;
  @Input() folderId: string;
  @Input() documentId: string;

  @Output() closeDesktopComponent = new EventEmitter<any>();
  @Output() openPublicationDetails = new EventEmitter<any>();
  @Output() goBackToViewPublications = new EventEmitter<any>();
  @Output() goBacktoPublicationDetails = new EventEmitter<any>();

  guestPicture: any;

  capturedImage: any = '';
  capturedImageTitle: any = '';
  fileType: string;
  filecontent: boolean;
  captureContent: any;
  seletedContent: any[] = []
  displayLimit = 4;
  filesSizeSum = 0;

  constructor(
    public photoService: PhotoService,
    private publications: PublicationsService,
    private toastService: ToastService,
    public ThemeService: ThemeService,
    private httpErroHandle: HttpErrorHandle,
    public PublicationFolderService: PublicationFolderService,
    public checkFileType: checkFileTypeService,
    private FileValidatorService: FileValidatorService
  ) {
    this.publicationTitle = 'Nova Publicação';
 
    if (this.publication) {
      this.seletedContent = this.publication.Files;
      this.filecontent = true;
    }
    

  }

  ngOnInit() {

    this.publication = {
      DateIndex: "",
      DocumentId: 0,
      ProcessId: "",
      Title: "",
      Message: "",
      DatePublication: "",
      Files: [],
      OriginalFileName: "",
    }
    this.pub = this.publication;

    this.setTitle();
    this.setData()
  }


  setData() {
    if (!this.publicationType) {
      setTimeout(() => {
        this.setData()
      }, 500)
    } else {
      // this.pub = this.publication
      // this.publication = null
      this.getPublicationDetail()
    }
  }


  getPublicationDetail() {
    console.log('edit 1', this.publicationType)
    if (this.publicationType != '2') {
      this.showLoader = true;
      this.publications.GetPublicationWithArrayOfFilesById(this.documentId).subscribe(res => {
        this.publication = {
          DateIndex: res.DateIndex,
          DocumentId: res.DocumentId,
          ProcessId: res.ProcessId,
          Title: res.Title,
          Message: res.Message,
          DatePublication: res.DatePublication,
          Files: res.Files,
          OriginalFileName: res.OriginalFileName,
          FileExtension: res.FileExtension,
        }
        console.log('edit',this.publication)
        this.pub = this.publication;
        this.seletedContent = this.publication.Files;
        this.showLoader = false;
      }, (error) => {
        console.log(error)
        this.showLoader = false;
        this.goBack()
      });
    }


  }

  async takePicture() {
    const capturedImage = await Camera.getPhoto({
      quality: 50,
      // allowEditing: true,
      resultType: CameraResultType.Base64,
      source: CameraSource.Camera
    });

    this.capturedImage = 'data:image/jpeg;base64,' + capturedImage.base64String;
    this.capturedImageTitle = 'foto';

    /* if(validation.isOk) { */
    const compressedImage = await this.compressImageBase64(
      this.capturedImage,
      800, // maxWidth
      800, // maxHeight
      0.9  // quality
    ).then((picture) => {
      let fileObject = {
        FileBase64: picture,
        FileExtension: this.removeTextBeforeSlash('jpeg','/')
      }
      this.seletedContent.push(fileObject)
    });
  /* }  else {
    this.toastService._badRequest("Imagem inválida")
  } */
  }

  async laodPicture() {
    const capturedImage = await Camera.getPhoto({
      quality: 90,
      resultType: CameraResultType.Base64,
      source: CameraSource.Photos
    });

    this.fileType = capturedImage.format
    console.log(this.fileType)
    this.capturedImage = 'data:image/jpeg;base64,' + capturedImage.base64String;
    this.capturedImageTitle = 'foto';

    const compressedImage = await this.compressImageBase64(
      this.capturedImage,
      800, // maxWidth
      800, // maxHeight
      0.9  // quality
    ).then((picture) => {
      let fileObject = {
        FileBase64: picture,
        FileExtension: this.removeTextBeforeSlash('jpeg','/')
      }
      this.seletedContent.push(fileObject)
    });

  }

  async loadVideo() {

    const result = await FilePicker.pickMedia
      ({
        multiple: true,
      });

    
      

    result.files.forEach(async element => {
      console.log(element)
      if(this.checkFileType.checkFileType(element.mimeType) == 'image' || this.checkFileType.checkFileType(element.mimeType) == 'video') {
        this.convertBlobToBase64(element.blob).then((value) => {
          this.filesSizeSum = this.filesSizeSum + element.size 
         if(this.fileSizeToMB(this.filesSizeSum) <= 20) {
          let fileObject = {
            FileBase64: value,
            FileExtension: this.removeTextBeforeSlash(element.mimeType,'/')
          }
          this.seletedContent.push(fileObject)
          this.filecontent = true;
         } else {
          if(this.seletedContent.length === 0)
          this.filesSizeSum = 0

          this.httpErroHandle.validationMessagge('filessize');
         }
        })
      } else {
        this.httpErroHandle.validationMessagge('filetype');
      }
      
    });

    /*       this.capturedImage = 'data:image/jpeg;base64,' +capturedImage.base64String;
      this.capturedImageTitle = 'foto';


      const validation = await this.FileValidatorService.ValidateImage(this.capturedImage)

      if(validation.isOk) {

        const compressedImage = await this.compressImageBase64(
          this.capturedImage,
          800, // maxWidth
          800, // maxHeight
          0.9  // quality
        ).then((picture) => {
          console.log('Selected: ', picture)
          this.capturedImage = picture
        });
      } else {
        this.toastService._badRequest("Imagem inválida")
      } */

  };


  runValidation() {
    this.validateFrom = true
  }

  injectValidation() {

    this.Form = new FormGroup({
      Subject: new FormControl(this.pub.Title, [
        Validators.required,
        // Validators.minLength(4)
      ]),
      Message: new FormControl(this.pub.Message, [
        Validators.required,
        Validators.maxLength(1000)
      ])
    })
  }


  async save() {

    this.injectValidation()
    this.runValidation()

    if (this.Form.invalid) {
      return false
    } else {

    }

    if (this.publicationType == '3') {

      if (!this.publication?.OriginalFileName || !this.pub.OriginalFileName) {

        if (this.pub?.OriginalFileName) {
          console.log('this.pub', this.pub)
        }
        throw ('no this.publication.OriginalFileName')

      }

      const loader = this.toastService.loading()

      if (this.seletedContent.length > 0) {

        this.publication = {
          DateIndex: this.publication.DateIndex,
          DocumentId: this.publication.DocumentId,
          ProcessId: this.publication.ProcessId,
          Title: this.pub.Title,
          Message: this.pub.Message,
          DatePublication: this.publication.DatePublication,
          OriginalFileName: this.publication.OriginalFileName || 'foto',
          Files: this.seletedContent,
        }

        try {

          const response = await this.publications.UpdatePublication(this.publication.ProcessId, this.publication).toPromise()

          this.httpErroHandle.httpsSucessMessagge('Editar publicação')
          console.log({ response })

          this.goBack();

        } catch (error) {
          this.httpErroHandle.httpStatusHandle(error)
          if (error.status == 404) {
            this.PublicationFolderService.deletePost(this.publication.ProcessId, this.publication.DocumentId)
            this.goBack();
          }
        } finally {
          loader.remove()
        }

      } else {
      }/* 
      else if (!this.PublicationFolderService.PublicationHasImage(this.publication)) { //

        this.publication = {
          DateIndex: this.publication.DateIndex,
          DocumentId: this.publication.DocumentId,
          ProcessId: this.publication.ProcessId,
          Title: this.pub.Title,
          Message: this.pub.Message,
          DatePublication: this.publication.DatePublication,
          OriginalFileName: this.publication.OriginalFileName,
          Files: "data:image/png;base64,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
          FileExtension: 'jpeg',
        }

      } else {
        this.publication = {
          DateIndex: this.publication.DateIndex,
          DocumentId: this.publication.DocumentId,
          ProcessId: this.publication.ProcessId,
          Title: this.pub.Title,
          Message: this.pub.Message,
          DatePublication: this.publication.DatePublication,
          OriginalFileName: this.publication.OriginalFileName,
          Files: this.publication.Files,
          FileExtension: this.publication.FileExtension,
        }

      } */

    }
    else {
      let time = new Date()
      if (this.seletedContent.length > 0) {
        this.publication = {
          DateIndex: time,
          DocumentId: null,
          ProcessId: this.folderId,
          Title: this.pub.Title,
          Message: this.pub.Message,
          DatePublication: time,
          OriginalFileName: this.capturedImageTitle || 'foto',
          Files: this.seletedContent,
        }

        const loader = this.toastService.loading()

        try {

          await this.publications.CreatePublication(this.publication.ProcessId, this.publication).toPromise()
          if (this.publicationTitle == '1') {

          } else if (this.publicationTitle == '2') {
            this.httpErroHandle.httpsSucessMessagge('Criar publicação')
          } else if (this.publicationTitle == '3') {
            this.httpErroHandle.httpsSucessMessagge('Editar publicação')
          }

          this.goBackToViewPublications.emit();
        } catch (error) {
          this.httpErroHandle.httpStatusHandle(error)
        } finally {
          loader.remove()
        }
      }

    }
  }

  close() {
    this.goBack();
  }

  clear() {
    this.capturedImageTitle = '';
    this.seletedContent = [];
  }

  deletePublicationImage() {

    this.publication.Files = []
  }

  setTitle() {
    if (this.publicationType == '1') {
      this.publicationTitle = 'Nova Publicação Rápida';
    }
    else if (this.publicationType == '2') {
      this.publicationTitle = 'Nova Publicação';
    }
    else if (this.publicationType == '3') {
      this.publicationTitle = 'Editar Publicação';
      this.pub = this.publication;
    }
  }

  async goBack() {

    if (this.publicationType == '2') {
      this.goBackToViewPublications.emit();
    } else {
      this.goBackToViewPublications.emit();
      //this.goBacktoPublicationDetails.emit();
    }

  }

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

  convertBlobToBase64(blob: Blob) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader;
      reader.onerror = reject;
      reader.onload = () => {
        resolve(reader.result)
      }
      reader.readAsDataURL(blob)
    })
  }

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

  async compressVideoBase64(base64String: string, maxWidth: number, maxHeight: number, quality: number): Promise<string> {
    console.log(base64String)
    return new Promise(async (resolve, reject) => {
      try {
        // Decode the base64 video string to an ArrayBuffer
        const trimmedBase64 = base64String.trim();
        const videoBuffer = this.base64ToArrayBuffer(this.removeTextBeforeSlash(trimmedBase64, ','));
  
        // Create a Blob from the ArrayBuffer
        const videoBlob = new Blob([videoBuffer], { type: 'video/mp4' });
  
        // Create an object URL from the Blob
        const videoObjectUrl = URL.createObjectURL(videoBlob);
  
        // Create a video element
        const video = document.createElement('video');
        video.src = videoObjectUrl;
  
        // Wait for the video to load metadata
        video.addEventListener('loadedmetadata', async () => {
          const canvas = document.createElement('canvas');
          let newWidth = video.videoWidth;
          let newHeight = video.videoHeight;
  
          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');
  
          // Start continuous rendering
          function render() {
            context?.drawImage(video, 0, 0, newWidth, newHeight);
            requestAnimationFrame(render);
          }
  
          render();
  
          // Convert the canvas to a Blob
          canvas.toBlob(async (blob) => {
            if (blob) {
              // Read the Blob as an ArrayBuffer
              const compressedVideoBuffer = await this.readBlobAsArrayBuffer(blob);
  
              // Convert the ArrayBuffer back to base64
              const compressedBase64 = this.arrayBufferToBase64(compressedVideoBuffer);
  
              resolve(compressedBase64);
            } else {
              reject('Error creating compressed video blob.');
            }
          }, 'video/mp4', 0.5);
        });
      } catch (error) {
        reject(error);
      }
    });
  }
  


/*   async compressVideoBase64(base64String: string, maxWidth: number, maxHeight: number, quality: number): Promise<string> {
    return new Promise(async (resolve, reject) => {
      try {
        // Decode the base64 video string to an ArrayBuffer
        const videoBuffer = this.base64ToArrayBuffer(this.removeTextBeforeSlash(base64String,','));
  
        // Create a Blob from the ArrayBuffer
        const videoBlob = new Blob([videoBuffer], { type: 'video/mp4' });
  
        // Create an object URL from the Blob
        const videoObjectUrl = URL.createObjectURL(videoBlob);
  
        // Create a video element
        const video = document.createElement('video');
  
        // Create a source element and set its type attribute
        const source = document.createElement('source');
        source.type = 'video/mp4';
  
        // Set the source URL
        source.src = videoObjectUrl;
  
        // Append the source element to the video element
        video.appendChild(source);
  
        // Wait for the video to load
        video.addEventListener('loadedmetadata', async () => {
          const canvas = document.createElement('canvas');
          let newWidth = video.videoWidth;
          let newHeight = video.videoHeight;
  
          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');
  
          // Create a function to draw each video frame onto the canvas
          const drawFrame = () => {
            context?.drawImage(video, 0, 0, newWidth, newHeight);
  
            // Convert the canvas to a Blob with the correct MIME type
            canvas.toBlob(async (blob) => {
              if (blob) {
                // Read the Blob as an ArrayBuffer
                const compressedVideoBuffer = await this.readBlobAsArrayBuffer(blob);
  
                // Convert the ArrayBuffer back to base64
                const compressedBase64 = this.arrayBufferToBase64(compressedVideoBuffer);
  
                resolve(compressedBase64);
              } else {
                reject('Error creating compressed video blob.');
              }
            }, 'video/mp4', quality);
  
            // Request the next video frame
            requestAnimationFrame(drawFrame);
          };
  
          // Start drawing frames
          drawFrame();
  
          // Start playing the video
          video.play();
        });
  
      } catch (error) {
        reject(error);
      }
    });
  } */

  
  

 /*  async compressVideoBase64(base64String: string, maxWidth: number, maxHeight: number, quality: number): Promise<string> {
    return new Promise(async (resolve, reject) => {
      try {
        // Decode the base64 video string to an ArrayBuffer
        const videoBuffer = this.base64ToArrayBuffer(this.removeTextBeforeSlash(base64String,','));
  
        // Create a Blob from the ArrayBuffer
        const videoBlob = new Blob([videoBuffer], { type: 'video/mp4' });
  
        // Create an object URL from the Blob
        const videoObjectUrl = URL.createObjectURL(videoBlob);
  
        // Create a video element
        const video = document.createElement('video');
        video.src = videoObjectUrl;
  
        // Wait for the video to load metadata
        video.addEventListener('loadedmetadata', async () => {
          const canvas = document.createElement('canvas');
          let newWidth = video.videoWidth;
          let newHeight = video.videoHeight;
  
          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(video, 0, 0, newWidth, newHeight);
  
          // Convert the canvas to a Blob with the correct MIME type
          canvas.toBlob(async (blob) => {
            if (blob) {
              // Read the Blob as an ArrayBuffer
              const compressedVideoBuffer = await this.readBlobAsArrayBuffer(blob);
  
              // Convert the ArrayBuffer back to base64
              const compressedBase64 = this.arrayBufferToBase64(compressedVideoBuffer);
  
              resolve(compressedBase64);
            } else {
              reject('Error creating compressed video blob.');
            }
          }, 'video/mp4', quality);
  
        });
  
      } catch (error) {
        reject(error);
      }
    });
  } */
  

/*   async compressVideoBase64(base64String: string, maxWidth: number, maxHeight: number, quality: number): Promise<string> {
    return new Promise(async (resolve, reject) => {
      try {
        // Decode the base64 video string to an ArrayBuffer

        const trimmedBase64 = base64String.trim();
        console.log(this.removeTextBeforeSlash(trimmedBase64,','))
        const videoBuffer = this.base64ToArrayBuffer(this.removeTextBeforeSlash(trimmedBase64,','));
  
        // Create a Blob from the ArrayBuffer
        const videoBlob = new Blob([videoBuffer], { type: 'video/mp4' });
  
        // Create an object URL from the Blob
        const videoObjectUrl = URL.createObjectURL(videoBlob);
  
        // Create a video element
        const video = document.createElement('video');
        video.src = videoObjectUrl;
  
        // Wait for the video to load metadata
        video.addEventListener('loadedmetadata', async () => {
          const canvas = document.createElement('canvas');
          let newWidth = video.videoWidth;
          let newHeight = video.videoHeight;
  
          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(video, 0, 0, newWidth, newHeight);
  
          // Convert the canvas to a Blob
          canvas.toBlob(async (blob) => {
            if (blob) {
              // Read the Blob as an ArrayBuffer
              const compressedVideoBuffer = await this.readBlobAsArrayBuffer(blob);
  
              // Convert the ArrayBuffer back to base64
              const compressedBase64 = this.arrayBufferToBase64(compressedVideoBuffer);
  
              resolve(compressedBase64);
            } else {
              reject('Error creating compressed video blob.');
            }
          }, 'video/mp4', quality);
  
        });
  
      } catch (error) {
        reject(error);
      }
    });
  } */
  
  private base64ToArrayBuffer(base64: string): ArrayBuffer {
    const binaryString = window.atob(base64);
    const len = binaryString.length;
    const bytes = new Uint8Array(len);
    for (let i = 0; i < len; ++i) {
      bytes[i] = binaryString.charCodeAt(i);
    }
    return bytes.buffer;
  }
  
  private async readBlobAsArrayBuffer(blob: Blob): Promise<ArrayBuffer> {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onloadend = () => {
        if (reader.result instanceof ArrayBuffer) {
          resolve(reader.result);
        } else {
          reject('Error reading blob as ArrayBuffer.');
        }
      };
      reader.readAsArrayBuffer(blob);
    });
  }
  
  private arrayBufferToBase64(buffer: ArrayBuffer): string {
    const binary = String.fromCharCode(...new Uint8Array(buffer));
    return btoa(binary);
  }
  

  fileSizeToMB(sizeInBytes) {
    var sizeInMB = (sizeInBytes / (1024 * 1024)).toFixed(2);
    console.log(sizeInMB + 'MB');
    return parseInt(sizeInMB)
  }

  deleteFromSeletedContent(index){
    this.seletedContent.splice(index,1)
  }

}