import { Component, OnInit, ViewChild } from '@angular/core';
import { ToastController, ModalController, NavController, IonContent } from '@ionic/angular';
import { Router, ActivatedRoute, Params, RoutesRecognized, NavigationExtras } from '@angular/router';

import { AngularFirestore } from '@angular/fire/firestore'

import { ServiceFilterPage } from '../../modal/service-filter/service-filter.page';
import { MyLocation, GoogleMap } from '@ionic-native/google-maps';

import { Geolocation } from '@ionic-native/geolocation/ngx';

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

  @ViewChild('mapElement', {static: true}) mapElement: any
  public search: string=''
  public service: string=''
  public searchResults = new Array<any>()
  public destination: any
  private myLocation: MyLocation
  
  public vendors: any;
  public vendorList = new Array<any>()
  public sortVendorList = new Array<any>()
  public loadVendor = new Array<any>()
  flag: boolean = false;
  message: any;
  showSkele: boolean = false;

  filter: string

  constructor(
    public toastCtrl: ToastController,
    public route: Router,
    public activatedRoute: ActivatedRoute,
    public nav: NavController,
    public firestore: AngularFirestore,
    public modalCtrl: ModalController,
    public geolocation: Geolocation,
  ) { 

  }

  async ngOnInit() {
    this.filter = "default"

    // pass category through router
    this.service = this.activatedRoute.snapshot.params['service'];
    // console.log("dada", this.service)
    await this.firestore.collection('HomeServices', ref => ref.where("category", "==", this.service)).get().toPromise()
      .then(snapshot => {
        if (snapshot.empty) {
          console.log('No matching documents.');
          return;
        }  
        snapshot.forEach(doc => {
          // console.log("didi", doc.id, '=>', doc.data());
          this.vendorList.push(doc.data())
          this.loadVendor.push(doc.data())
        })
      })
      .catch(err => {
        console.log("Error getting documents: ", err)
      })
    
    this.vendors = await this.calculateDistance();

    // this.sortVendorList = this.vendorList.map((data) => {
    //   return data
    // } )

    this.vendorList.forEach(val => 
      this.sortVendorList.push(Object.assign({}, val))
    );

    console.log('sad:  ', this.vendors)
    console.log('ssadasdas:  ', this.vendorList)
    setTimeout(() => {
      this.showSkele = true;
    }, 1000);
  }


  // calculate distance

  async calculateDistance() {
    var lat1 = 0.0;
    var lnt1 = 0.0;
    await this.geolocation.getCurrentPosition().then((resp) => {
      lat1 = resp.coords.latitude;
      // console.log('lng: ', resp.coords.latitude)
      lnt1 = resp.coords.longitude;
     }).catch((error) => {
       console.log('Error getting location', error);
    });

    // this.vendorList.map((vendor) => {
    for (const i in this.vendorList){
      // console.log('distanceDISTANCasdasdfsafE  ', this.vendorList[i])
      // console.log('lat: ', lat1)
      // console.log('lng: ', lnt1)
      // debugger
      const lat2 = this.vendorList[i].location.lat
      const lnt2 = this.vendorList[i].location.lng
      this.vendorList[i].distance = (this.getDistanceFromLatLonInKm(lat1, lnt1, lat2, lnt2)).toFixed(1)
      // console.log('distanceDISTsdANCE  ', this.vendorList[i].distance)
    };

    return this.vendorList;

  }

  getDistanceFromLatLonInKm(lat1,lon1,lat2,lon2) {
    const R = 6371; // Radius of the earth in km
    const dLat = this.deg2rad(lat2-lat1);  // deg2rad below
    const dLon = this.deg2rad(lon2-lon1); 
    const a =
        Math.sin(dLat/2) * Math.sin(dLat/2) +
        Math.cos(this.deg2rad(lat1)) * Math.cos(this.deg2rad(lat2)) * 
        Math.sin(dLon/2) * Math.sin(dLon/2);
        const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
        const d = R * c; // Distance in km
        return d;
  }

  deg2rad(deg) {
    return deg * (Math.PI/180) / 1.6
  }

  async presentModal() {
    const modal = await this.modalCtrl.create({
      component: ServiceFilterPage,
      componentProps: {
        "value": this.filter,
      }
      // mode: "ios"
    });

    modal.onDidDismiss().then((data) => {
      if (data !== null) {
        this.filter = data.data;
        if (this.filter === "distance") {

          this.sortVendorList.sort((v1, v2) => {
            return v1.distance - v2.distance;
          });
          this.vendors = this.sortVendorList
        } else if (this.filter === "default") {
          this.vendors = this.vendorList;
        }
      } 
      console.log(this.filter);
    });
    return await modal.present();
  }  

  async goMap() {
    this.route.navigate(['home/feed/service-map', this.service])
  }  

  navBack() {
    this.nav.back();
  }

  async toConfirm(v) {
    let navigationExtras: NavigationExtras = {
      queryParams: {
        vendor: JSON.stringify(v),
        back: "home"
      }
    }
    this.route.navigate(['home/feed/service-lists/service-confirm'], navigationExtras)
  }
}