import { Component, ViewChild, ElementRef } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';
import { CommonProvider } from '../../providers/common/common';
import { Storage } from '@ionic/storage';

import {TranslateService} from '@ngx-translate/core';
import { SubjectService } from '../../providers/subject.service';
import { WebService_lang } from '../../providers/web.service';
import * as $ from 'jquery';

declare var google;

@IonicPage()
@Component({
  selector: 'page-filter',
  templateUrl: 'filter.html',
})

export class FilterPage {

  @ViewChild('language') language: ElementRef;
  lang =  'en';
	filter:any;
	result:any;
	response:any;
  search_filter:any;
  location:any;
  selected_location:any;
  selected_lat_lng:any;
  componentForm:any;
  current_location:any;
  place_choose:number;
  constructor(
    public translate: TranslateService,
    public subjectService: SubjectService,
    public service_lang: WebService_lang, 
    public navCtrl: NavController,
    public navParams: NavParams,
    public service: CommonProvider,
    public viewCtrl:ViewController,
    public storage: Storage) {
  	this.filter = "service";
    this.place_choose = 0;
  	this.response = navParams.get('params');
    console.log(this.response);
    this.search_filter = {"service":[],"offer":"","gender":"","location":"","key_word":""};
    //this.location = {"lat":"9.966","lng":"76.3029"}
    this.search_filter.key_word = ''; 
    this.componentForm = {
      locality: 'long_name',
    };
    this.storage.get('current').then(data=>{
      if(data){
        this.selected_location = data.location;
      }       
    })

    this.subjectService.getLangData().subscribe(langData => {
      console.log(langData);
      this.lang = this.service_lang.getLocalStorageItem('lang');
      console.log(this.lang);
      if (this.lang) {
        translate.setDefaultLang(this.lang);
        translate.use(this.lang);
      }
    });

    
    const lang  = this.service_lang.getLocalStorageItem('lang');
    console.log(lang);

    if(lang !== undefined){
      this.lang = lang;
    }

    if(this.lang === 'ru') {
      $('body').addClass('ru');
    } else {
      $('body').removeClass('ru');
    }

   // this.lang = 'en';

    translate.setDefaultLang(this.lang);

    // the lang to use, if the lang isn't available, it will use the current loader to get them

    translate.use(this.lang);



  }

  ionViewDidLoad() {

    /*console.log('ionViewDidLoad FilterPage');
    this.service.post_data('shop_details',post_data).subscribe(data=>{
  		this.result = data;
  	})*/
  }

  close(){
    this.viewCtrl.dismiss();
    console.log('ionViewDidLoad FilterPage');    
  }

  filter_select(type:string,value,event=undefined){
    switch(type){
      case "service":
        if(event.checked==true){
          this.search_filter.service.push(value);
        } else {
          var index = this.search_filter.service.indexOf(value);
          this.search_filter.service.splice(index,1);
        }  
      break;
      case "offer":
        this.search_filter.offer = value;
      break;
      case "gender":
        this.search_filter.gender = value;
      break;
      default:
        if(this.place_choose==1){
          this.location = this.selected_lat_lng;
        } else if(this.place_choose==2){
          this.storage.get('current').then(curr_data=>{
            if(curr_data){
              this.location = curr_data.lat_lng;
            }
            
          })
        } else {
          this.location = "";
        }
        this.search_filter.location = this.location;
    }
  }

  dismiss() {
    console.log(this.search_filter);
    if(this.place_choose!=0){
      this.search_filter.location = this.location
    }
    this.viewCtrl.dismiss(this.search_filter);
  }

  initialize(evt) {
    console.log('map', evt)
    var elm = evt.target.id;
    var addressType=elm;
    var input = document.getElementById(elm);
    var options = {
      types: ['(cities)']      
    };
    this.location = 0;
    var autocomplete = new google.maps.places.Autocomplete(input,options);      
    let thiss = this;
    google.maps.event.addListener(autocomplete, 'place_changed', function () {
      var place = autocomplete.getPlace();
      console.log(place.address_components);
      for (var i = 0; i < place.address_components.length; i++) {
        addressType = place.address_components[i].types[0];
        console.log(addressType); 
        if(addressType =='locality'){
          var val = place.address_components[i][thiss.componentForm[addressType]];          
          (document.getElementById(elm) as HTMLInputElement).value= place.formatted_address;
        }
        console.log(val);
      }      
      console.log(place.formatted_address)
      //thiss.selected_location = place.formatted_address;
      var latLong = autocomplete.getPlace().geometry.location;
      var js=JSON.stringify(latLong);
      var par=JSON.parse(js);

      var sel_location = place.formatted_address;
      if(par){
            var lat_lng = {"lat":par.lat,"lng":par.lng};
          thiss.selected_lat_lng = lat_lng;
          thiss.location = lat_lng;
          thiss.storage.set('set_location',{'location':sel_location,'lat_lng':lat_lng})
      }
      
      console.log(thiss.location);
    });    
  }

  choose_loc(value:number){
    this.place_choose = value;
    if(value==2){
      this.storage.get('current').then(curr_data=>{
        if(curr_data){
          this.location = curr_data.lat_lng;
        }            
      })
    }
  }

}
