import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { WpServiceService } from '../wp-service.service';

import { Geolocation } from '@ionic-native/geolocation/ngx';
import { NativeGeocoder, NativeGeocoderResult, NativeGeocoderOptions } from '@ionic-native/native-geocoder/ngx';
import { CallNumber } from '@ionic-native/call-number/ngx';
import { EmailComposer } from '@ionic-native/email-composer/ngx';
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
import { Platform } from '@ionic/angular';

declare var google;

class ProductOrder {
    public total: number = 0;
    public sku_select: any;
    public n_unit: number = 1;

    constructor(){  }

    cal_total() {
        if( this.sku_select != undefined ) {
            console.log(this.sku_select);
            this.total =  this.sku_select['price'] * this.n_unit;
            console.log(this.total);
            return this.total;
        }else {
            return this.total;
        }
    }

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

    data: any;
    placelist: any;
    productOrder = new ProductOrder()

    public segment: string = "list1";

    //@ViewChild('map', { static: false }) mapElement: ElementRef;

    private mapElement: ElementRef;
    @ViewChild('map') set content(content: ElementRef) {
        if(content) { // initially setter gets called with undefined
            this.mapElement = content;
        }
    }

    map: any;
    address: string;
    latitude: number;
    longitude: number;
    latdynamic: any;
    londynamic: any;
    product: any;
    storeDetail: any;
    photos: any[];

    id: string;
    showDiss = false;

    ios: boolean;
    android: boolean;

    constructor(private wpservice: WpServiceService, private route: ActivatedRoute, private router: Router, private geolocation: Geolocation, 
        private nativeGeocoder: NativeGeocoder,private callNumber: CallNumber, private emailComposer: EmailComposer, private iab: InAppBrowser, public platform: Platform) {
        this.ios = platform.is('ios');
        this.android = platform.is('android');
    }

    ngOnInit() {
        this.id = this.route.snapshot.paramMap.get('id');
    }

    ionViewWillEnter() {

        this.wpservice.getProductId(this.id).then(res => {
            this.product = JSON.parse(res['data']);
            console.log(this.product);
        }, 
            error => {
                console.log(error);
            });
    }

    callNow(number) {
        this.callNumber.callNumber(number, true)
            .then(res => console.log('Launched dialer!', res))
            .catch(err => console.log('Error launching dialer', err));
    }
    openMapLink() {
        let geo = this.product['store_geo'];
        if(geo != null) {
            const browser =  this.iab.create('https://www.google.com/maps/place/'+geo, '_system');
            //const browser =  this.iab.create('maps://?q='+geo, '_system');
        }
    }

    addToCart() {
        console.log('add to cart');
        this.wpservice.addToCart(this.product).then( res => {
            console.log("add to cart response");
            let data = JSON.parse(res.data);
            console.log(data);
        });
    }
}
