<template>
  <div class="container-fluid container-shadow p-2 rounded-3">
    <div class="row my-3">
      <div class="col">
        <vehicleBanner ref="vehicleBanner" />
      </div>
    </div>
    <div class="row my-4">
      <div class="col">
        <label for="autocomplete">Home address</label>
        <input ref="autocomplete" 
            id="autocomplete"
            placeholder="Search" 
            class="form-control search-location"
            onfocus="value = ''" 
            type="text" />
      </div>
    </div>          
  </div>  
</template>

<script>

import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
export default {
  name: "App",
  components: {
    vehicleBanner
  },

  mounted() {
    this.$refs.vehicleBanner.initializeComponent({GenericVehicleImage: 'https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3'});

    let self = this;
//AIzaSyDptGCkOPgN2uWJOy4ou4M33phRD4MAoJo - localhost:8080
//AIzaSyBji_2ApAj2vE_XNGyV-LaUEKrmuElpJ1w
    this.$loadScript("https://maps.googleapis.com/maps/api/js?key=AIzaSyBji_2ApAj2vE_XNGyV-LaUEKrmuElpJ1w&libraries=places")
      .then(() => {
        // Script is loaded, do something
        self.autocomplete = new window.google.maps.places.Autocomplete(
          (self.$refs.autocomplete),
          { 
            componentRestrictions: { country: ["us"] },
            fields: ["address_components"],
            types: ['address'] 
          }
        );

        self.autocomplete.addListener('place_changed', () => {
          let place = self.autocomplete.getPlace();
          let address1 = "";
          let postcode = "";

          let input = document.getElementById("autocomplete");

          for (const component of place.address_components) {
            const componentType = component.types[0];

            switch (componentType) {
              case "street_number": {
                address1 = `${component.long_name} ${address1}`;
                break;
              }

              case "route": {
                address1 += component.short_name;
                break;
              }
              case "locality":
                address1 += ', ' + component.long_name;
                break;
              case "administrative_area_level_1": {
                address1 += ', ' +  component.short_name;
                break;
              }
              case "postal_code": {
                postcode = `${component.long_name}${postcode}`;
                break;
              }

              case "postal_code_suffix": {
                postcode = `${postcode}-${component.long_name}`;
                break;
              }

            }

            let addressField1 = document.querySelector("#autocomplete");
            addressField1.value = address1 + ' ' + postcode;
          }      
        }); 
      })
      .catch(() => {
        // Failed to fetch script
        console.log("Unable to load Google Places API script")
      });
  },

};

</script>
