import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer';
import { File } from '@ionic-native/file';
import { ActionSheetController } from 'ionic-angular';
import { Camera, CameraOptions } from '@ionic-native/camera';
import { HealthProvider } from '../../providers/health/health';
/**
 * Generated class for the EventUploadPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
    selector: 'page-event-upload',
    templateUrl: 'event-upload.html',
})
export class EventUploadPage {

     imagePickerOptions = {
         maximumImagesCount: 1,
         quality: 50
       };
     croppedImagePath:string = "";

     photoURL: any;
    eventPhotos: Array<any>;
     msg:string = "Upload Stat Photo";
    eventId:string;
    title: string;

    constructor(public navCtrl: NavController, public navParams: NavParams, private camera: Camera,   public actionSheetController: ActionSheetController, private hp: HealthProvider) {
        this.eventId = navParams.get('eventId');
        this.title = navParams.get('title');
        //console.log("eventId "+eventId);
    }

    async ionViewDidEnter() {
        console.log('ionViewDidLoad EventUploadPage');
        this.eventPhotos = await this.hp.getEventPhotos(this.eventId);
        console.log(JSON.stringify(this.eventPhotos));
    }
      async selectImage() {
         const actionSheet = await this.actionSheetController.create({
             title: "Select Image source",
             buttons: [{
                 text: 'Load from Library',
                 handler: () => {
                     this.pickImage(this.camera.PictureSourceType.PHOTOLIBRARY);
                 }
             },
                 {
                     text: 'Use Camera',
                     handler: () => {
                         this.pickImage(this.camera.PictureSourceType.CAMERA);
                     }
                 },
                 {
                     text: 'Cancel',
                     role: 'cancel'
                 }
             ]
         });
         await actionSheet.present();
     }
    pickImage(sourceType) {
        const options: CameraOptions = {
            quality: 100,
            sourceType: sourceType,
            destinationType: this.camera.DestinationType.FILE_URI,
            encodingType: this.camera.EncodingType.JPEG,
            mediaType: this.camera.MediaType.PICTURE
        }
        this.camera.getPicture(options).then( async (imageData) => {
            // imageData is either a base64 encoded string or a file URI
            this.croppedImagePath = 'data:image/jpeg;base64,' + imageData;

            console.log(this.croppedImagePath);
            this.msg = "Uploading ...";
            let r0  = await this.hp.uploadPhoto(this.eventId, imageData);
            this.eventPhotos = await this.hp.getEventPhotos(this.eventId);
            //this.photoURL = await this.hp.getPhoto();
            this.msg = "Upload Your Photo";
            console.log("r0");
            console.log(r0);
        }, (err) => {
            // Handle error
            console.log(err);
        });
    }

}
