import { observable, action, computed } from 'mobx';
import {
  MenuItem
} from 'material-ui';
import React from 'react';
export default class UserAddress {

  @observable address = [];
  @observable provinces = [];
  @observable cities = [];
  @observable geoData = {
    geoaddress : null,
    lat : null,
    lng : null
  };

  @observable searchValue = "";
  @observable autocompleteData = new Array();
  autocompleteService = new google.maps.places.AutocompleteService();
  constructor(context) {
    this.http = context.http;
    this.globalUI = context.globalUI;
    this.context = context;
  }
  @action resetCities(){
    this.cities = [];
  }

  @action searchPlaces(value){
    this.searchValue = value;

    if(!value) {
      this.searchValue = '';
      this.autocompleteData = [];
      return;
    }
    
    this.autocompleteService.getPlacePredictions({input: value}, (predictions, status) => {
      if (status === 'OK' && predictions && predictions.length > 0) {
        // console.log(predictions);
        this.autocompleteData = predictions.map(data => ({
          type: 'google',
          text: data.description,
          main_text: data.structured_formatting.main_text,
          secondary_text: data.structured_formatting.secondary_text,
          place_id: data.place_id,
          value: (<MenuItem anchorOrigin={{horizontal: 'left', vertical: 'center'}} innerDivStyle={{fontSize:12}} primaryText={<div className="primaryTextListMap"><span style={{fontWeight:600}}>{data.structured_formatting.main_text}</span>, <span >{data.structured_formatting.secondary_text}</span></div>}/>)
        }));
        // this.props.onOpen(predictions);
        // console.log(predictions);
      } else {
        // this.props.onClose();
      }
    });
  }

  @action
  getProvinces(){
    return this.http.get(`provinces`).then(res=>{
      this.provinces = res;
    })
  }

  @action
  getCities(province_id){
    return this.http.get(`cities?province_id=${province_id}`).then(res=>{
      this.cities = res;
    })
  }

  @action
  getAllAddress(){
    this.globalUI.openLoading();
    return this.http.get(`user_address`).then(res=>{
      this.address = res;
      this.globalUI.closeLoading();
    })
  }

  @action
  getAllAddressAdmin(id){
    this.globalUI.openLoading();
    return this.http.get(`user_address?user_store_id=${id}`).then(res=>{
      this.address = res;
      this.globalUI.closeLoading();
    })
  }

  @action
  addAddress(data){
    this.globalUI.openLoading();
    return this.http.post(`user_address`,data).then(res=>{
      this.getAllAddress();
      this.globalUI.closeLoading();
    })
  }

  @action
  addAddressAdmin(store_id,data){
    this.globalUI.openLoading();
    return this.http.post(`user_address?user_store_id=${store_id}`,data).then(res=>{
      this.getAllAddressAdmin(store_id);
      this.globalUI.closeLoading();
    })
  }

  @action
  updateAddress(data){

    this.globalUI.openLoading();
    return this.http.put(`user_address/${data.id}`,data).then(res=>{
      this.getAllAddress();
      this.globalUI.closeLoading();
    })
  }

  @action
  updateAddressAdmin(store_id,data){

    this.globalUI.openLoading();
    return this.http.put(`user_address/${data.id}?user_store_id=${store_id}`,data).then(res=>{
      this.getAllAddressAdmin(store_id);
      this.globalUI.closeLoading();
    })
  }

  @action
  deletedAddress(id){
    this.globalUI.openLoading();
    return this.http.delete(`user_address/${id}`).then(res=>{
      this.getAllAddress();
      this.globalUI.closeLoading();
    })
  }

  @action
  deletedAddressAdmin(store_id,id){
    this.globalUI.openLoading();
    return this.http.delete(`user_address/${id}/?user_store_id=${store_id}`).then(res=>{
      this.getAllAddressAdmin(store_id);
      this.globalUI.closeLoading();
    })
  }

  @action
  setGeoData(data){
    this.geoData = data;
  }



}
