import { Component, ElementRef, OnInit, ViewChild } from "@angular/core";
import { NavController, LoadingController, ToastController } from "@ionic/angular";
import { ActivatedRoute } from "@angular/router";
import { TranslateService } from "@ngx-translate/core";
import { AddressService } from "../../services/address.service";
import { UtilsService } from "../../services/utils.service";
import { StorageService } from '../../services/storage.service';
import { CartService } from "../../services/cart.service";

import { GoogleMap } from '@capacitor/google-maps';

@Component({
  selector: "page-address-map",
  templateUrl: "address-map.html",
  styleUrls: ["./address-map.scss"],
})
export class AddressMapPage implements OnInit {
  map;
  marker;
  coords: any;
  addressUser: any;
  addressEdit: string;
  address_id: number;
  pageOrigin: string;
  statusEditMarker: boolean = false;
  toastMessageText: any;

  @ViewChild('map') mapElement: ElementRef;

  constructor(
    public navCtrl: NavController,
    private storage: StorageService,
    public loadingCtrl: LoadingController,
    public addressProvider: AddressService,
    public toastCtrl: ToastController,
    public translateService: TranslateService,
    public route: ActivatedRoute,
    public utilsService: UtilsService,
    public cartProvider: CartService
  ) {
    // traduccion para textos toast
    this.translateService.get(["SUCCESS_UPDATE_LOCATION"]).subscribe((values) => {
      this.toastMessageText = {
        successUpdateLocation: values.SUCCESS_UPDATE_LOCATION,
      };
    });

    this.pageOrigin = this.route.snapshot.paramMap.get("pageOrigin");
    this.coords = this.addressProvider._coords;
    this.addressUser = this.addressProvider._addressUser;
    this.address_id = this.addressProvider._address_id;
    this.addressEdit = this.addressUser.typeTrack + " " + this.addressUser.track1 + " # " + this.addressUser.track2 + " - " + this.addressUser.track3;
  }

  ngOnInit() {
    this.loadMap();
  }

  async loadMap() {
    this.map = await GoogleMap.create({
      id: 'map_canvas',
      element: this.mapElement.nativeElement,
      apiKey: 'AIzaSyDv579f74i_47NZHBfdxAxprOsZ526iHVI',
      config: {
        center: {
          lat: this.coords.latitude,
          lng: this.coords.longitude,
        },
        zoom: 18,
        tilt: 30,
      },
    });

    await this.map.setCamera({
      coordinate: {
        lat: this.coords.latitude,
        lng: this.coords.longitude,
      }
    });

    this.marker = this.map.addMarker({
      title: "Tu ubicación",
      icon: "green",
      draggable: true,
      animation: "DROP",
      position: {
        lat: this.coords.latitude,
        lng: this.coords.longitude,
      },
    });
  }

  editLocationAddress() {
    this.statusEditMarker = true;
  }

  exitUpdateLocation() {
    if (this.pageOrigin == "confirmOrder" || this.pageOrigin == "addressListCreate") {
      this.cartProvider.updateAddressPrice();
      this.navCtrl.back();
      setTimeout(() => {
        this.navCtrl.back();
      }, 500);
    } else if (this.pageOrigin == "signup") {
      this.navCtrl.navigateRoot("/app/tabs/shop");
    }
  }

  updateLocationAddressUser() {
    let dataLocation: any = this.marker.getPosition();

    this.storage.get("token").then((token) => {
      if (token) {
        this.utilsService.presentLoading(this.translateService.instant("all.loading"));

        this.addressProvider.updateLocationAddress(this.address_id, dataLocation, token.access_token).subscribe(
          (resp) => {
            this.utilsService.dismissLoading();
            if (resp["status"] == "success") {
              this.utilsService.presentToast(3000, "success", "top", this.toastMessageText.successUpdateLocation);
              this.exitUpdateLocation();
            }
          },
          (error) => {
            this.utilsService.dismissLoading();
            console.log("error generateOrder", error);
          }
        );
      }
    });
  }
}