import { Component, OnInit } from '@angular/core';
import { Time } from '@angular/common';
import { ReportService } from 'src/app/services/report.service';
import { NativeGeocoder, NativeGeocoderOptions, NativeGeocoderResult } from '@ionic-native/native-geocoder/ngx';
import { Geolocation } from '@ionic-native/geolocation/ngx';
import { ActionSheetController } from '@ionic/angular';
import { Camera, CameraOptions } from '@ionic-native/camera/ngx';
import { Crop } from '@ionic-native/crop/ngx';
import { File } from '@ionic-native/file/ngx';
import { AngularFireStorage, AngularFireUploadTask } from '@angular/fire/storage';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';

@Component({
  selector: 'app-tab-report',
  templateUrl: './tab-report.page.html',
  styleUrls: ['./tab-report.page.scss'],
})

export class TabReportPage implements OnInit {

  reports: any;
  repID: number;
  repCategory: string;
  repLocation: number;
  repDate: Date;
  repTime: Time;
  repDesc: string;

  geoLatitude: number;
  geoLongitude: number;
  geoAccuracy: number;
  geoAddress: string;

  actionSheet: any;

  // Geocoder configuration
  geoencoderOptions: NativeGeocoderOptions = {
    useLocale: true,
    maxResults: 5
  };

  croppedImagepath: any;
  isLoading = false;

  imagePickerOptions = {
    maximumImagesCount: 1,
    quality: 50
  };

  image: any;

  fileName: string;
  fileSize: number;

  isUploaded: boolean;


  constructor(private reportService: ReportService, private geolocation: Geolocation,
    private nativeGeocoder: NativeGeocoder,
    public actionSheetController: ActionSheetController,
    private crop: Crop, private camera: Camera, private file: File,
    private storage: AngularFireStorage) {
     }

  ngOnInit() {

  }

  createReport() {


      this.file.readAsArrayBuffer(this.image.path, this.image.name).then(data => {
      this.isUploaded = false;

      this.fileName = this.image.name;

      // The storage path
      const path = `images/${new Date().getTime()}_${this.fileName}`;

      // Totally optional metadata
      const customMetadata = { app: 'Report Images' };

      // File reference
      const fileRef = this.storage.ref(path);

      var blob = new Blob([data], {
        type: "image/jpeg"
      });

      fileRef.put(blob);

      console.log({
        'image': path,
        'category': this.repCategory,
        'location': this.repLocation,
        'date': this.repDate,
        'time': this.repTime,
        'desc': this.repDesc
      })

      this.reportService.createReport({
        'image': path,
        'category': this.repCategory,
        'location': this.repLocation,
        'date': this.repDate,
        'time': this.repTime,
        'desc': this.repDesc
      }).then(resp => {
        this.repCategory = '';
        this.repLocation = undefined;
        this.repDate = undefined;
        this.repTime = undefined;
        this.repDesc = '';
      });
    });
  }

  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((imageData) => {
      this.cropImage(imageData);
    }, (err) => {
      // Handle error
    });
  }

  cropImage(fileUrl) {
    this.crop.crop(fileUrl, { quality: 50 })
      .then(
        newPath => {
          this.showCroppedImage(newPath.split('?')[0]);
        },
        error => {
          alert('Error cropping image' + error);
        }
      );
  }

  showCroppedImage(ImagePath) {
    this.isLoading = true;
    var copyPath = ImagePath;
    var splitPath = copyPath.split('/');
    var imageName = splitPath[splitPath.length - 1];
    var filePath = ImagePath.split(imageName)[0];

    this.image = {
      'name': imageName,
      'path': filePath
    }

    this.file.
    readAsDataURL(filePath, imageName).then(base64 => {
      this.croppedImagepath = base64;
      this.isLoading = false;
    }, error => {
      alert('Error in showing image' + error);
      this.isLoading = false;
    });
    console.log(ImagePath);
  }

  // Get current coordinates of device
  getGeolocation() {
    this.geolocation.getCurrentPosition().then((resp) => {
      this.repLocation = resp.coords.latitude;
      this.geoLatitude = resp.coords.latitude;
      this.geoLongitude = resp.coords.longitude;
      this.geoAccuracy = resp.coords.accuracy;
      console.log(resp);
      this.getGeoencoder(this.geoLatitude, this.geoLongitude);
     }).catch((error) => {
       alert('Error getting location' + JSON.stringify(error));
     });
  }

  // geocoder method to fetch address from coordinates passed as arguments
  getGeoencoder(latitude, longitude) {
    this.nativeGeocoder.reverseGeocode(latitude, longitude, this.geoencoderOptions)
    .then((result: NativeGeocoderResult[]) => {
      this.geoAddress = this.generateAddress(result[0]);
      alert(this.geoAddress);
    })
    .catch((error: any) => {
      alert('Error getting location' + JSON.stringify(error));
    });
  }

  // Return Comma saperated address
  generateAddress(addressObj) {
      let obj = [];
      let address = '';
      for (let key in addressObj) {
        obj.push(addressObj[key]);
      }
      obj.reverse();
      for (let val in obj) {
        if (obj[val].length){
          address += obj[val] + ' , ';
        }
      }
      return address.slice(0, -2);
  }

  presentActionSheet() {

    const actionSheet = document.createElement('ion-action-sheet');

    // actionSheet.header = "Albums";
    actionSheet.buttons = [{
      text: 'Camera',
      // icon: 'heart',
      handler: () => {
        this.pickImage(this.camera.PictureSourceType.CAMERA);
      }
    }, {
      text: 'Album',
      // icon: 'share',
      handler: () => {
        this.pickImage(this.camera.PictureSourceType.PHOTOLIBRARY);
      }
    }, {
      text: 'Delete',
      role: 'destructive',
      // icon: 'trash',
      handler: () => {
        console.log('Delete clicked');
      }
    }, {
      text: 'Cancel',
      // icon: 'close',
      role: 'cancel',
      handler: () => {
        console.log('Cancel clicked');
      }
    }];
    document.body.appendChild(actionSheet);
    return actionSheet.present();
  }

}