let autocomplete;
let address1Field;
let address2Field;

function initAutocomplete() {
  address1Field = document.querySelector("#primary_address_street");
  // Create the autocomplete object, restricting the search predictions to
  // addresses in the US and Canada.
  autocomplete = new google.maps.places.Autocomplete(address1Field, {
    componentRestrictions: {country: 'ca'},
    types: ["geocode"],
  });
  // When the user selects an address from the drop-down, populate the
  // address fields in the form.
  autocomplete.addListener("place_changed", fillInAddress);
}

function fillInAddress() {
  // Get the place details from the autocomplete object.
  const place = autocomplete.getPlace();
  let address1 = "";
  let postcode = "";

  // Get each component of the address from the place details,
  // and then fill-in the corresponding field on the form.
  // place.address_components are google.maps.GeocoderAddressComponent objects
  // which are documented at http://goo.gle/3l5i5Mr
  for (const component of place.address_components) {
    const componentType = component.types[0];
    //console.log(component);
    switch (componentType) {
      case "street_number": {
        address1 = `${component.long_name} ${address1}`;
        break;
      }

      case "route": {
        address1 += component.long_name;
        break;
      }

      case "postal_code": {
        document.querySelector("#primary_address_postalcode").value = component.long_name;
        break;
      }
      case "locality":
        document.querySelector("#primary_address_city").value = component.long_name;
        break;
      case "administrative_area_level_1": {
        document.querySelector("#primary_address_state").value = component.short_name;
        break;
      }
    }
  }

  address1Field.value = address1;
}