import { Component, OnInit, ViewChild } from '@angular/core';
import { IonSlides, ModalController, NavParams } from '@ionic/angular';
import { ImageCroppedEvent } from 'ngx-image-cropper';
import { PublicationsService } from 'src/app/services/publications.service';
import { GroupIconsPage } from '../group-icons/group-icons.page';
import { Share } from '@capacitor/share';
import { Router } from '@angular/router';
import { Directory, Filesystem } from '@capacitor/filesystem';

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

  constructor( private modalController: ModalController,
    private navParams:NavParams,
    public router: Router,
    private publicService: PublicationsService) { }

 
@ViewChild(IonSlides) slides : IonSlides
  image: any;
  name: string
  _updatedAt: string


  // myimage: null
  // croppedImageBase64: any

// @Input('img') img: any
// @Input() username: string;
// @Input() date: string;

  slideOpts = {
  zoom: true

  }

ngOnInit() {
  this.image = this.navParams.get('image')
  this.name = this.navParams.get('username')
  this._updatedAt = this.navParams.get('_updatedAt')
  // console.log(this.image)
  // this.image = this.myimage
}

ionViewDidEnter(){
  this.slides.update()
}

async zoom(zoomIn: boolean){
  const slider = await this.slides.getSwiper() //is swipper =!
  const zoom = slider.zoom
  zoomIn ? zoom.in(): zoom.out()
  }

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

// imageCropped(ev: ImageCroppedEvent){
//     this.croppedImageBase64 = ev.base64
//   }


// async grupo(){
//   const modal = await this.modalController.create({
//     component:   GroupIconsPage,
//     cssClass: 'transparent-modal',
//   });
//   modal.present();
//   }

async getIconGallery(){

    const modal = await this.modalController.create({
      component: GroupIconsPage ,
      animated: true,
      cssClass: 'transparent-modal',
            });
    modal.present();
  }

  openChat(){

    
  }

  clear() {
     this.getIconGallery()
   
  }

  openChatVideo(){

  }
  deleteImage(){
    document.addEventListener('DOMContentLoaded', ()=>{
      document.querySelector('img').addEventListener('click',removeImage)
    })
    function removeImage(ev){
      let img = ev.currentTarget
      let src = ev.target.closest('.img')
      src?.parentElement.removeChild(src)
     
    }
  }


async getIconShare(){

  
  await Share.share({
    title: 'See cool stuff',
    text: 'Really awesome thing you need to see right meow',
    url: "https://www.google.com/search?q=joao+louren%C3%A7o&rlz=1C1SQJL_pt-PTAO977AO977&sxsrf=AOaemvIEvXz_WiqNNapjaoE42Q8b71jtiA:1638355797910&source=lnms&tbm=isch&sa=X&sqi=2&ved=2ahUKEwjo9uX6tsL0AhXTlWoFHX1XAtcQ_AUoAXoECAMQAw&biw=1920&bih=937&dpr=1#imgrc=lH5UYZyhPKBhHM",
    dialogTitle: 'Share with buddies',
  });
  
}

redirPage(){
  this.router.navigateByUrl('/chat')
}

async deleteFile(entry){
  if(entry.isFile){
    await Filesystem.deleteFile({
      directory: Directory.Documents,
      path: this.image.src + '/' + entry.name
    })
  }else{
    await Filesystem.rmdir({
      directory: Directory.Documents,
      path: this.image.src + '/' + entry.name,
      recursive:true //remove all file as well
    })
  }

}
}