let autocomplete;
let address1Field = document.querySelector('[name="StreetAddress1"]');
let address2Field = document.querySelector('[name="StreetAddress2"]');
let shipping_check = document.getElementById('shipping_check');

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

    //shipping
    autocomplete2 = new google.maps.places.Autocomplete(address12Field, {
        fields: ["address_components"],
        types: ["address"],
    });
    autocomplete2.addListener("place_changed", fillInShippingAddress);
}

let streetElem = document.querySelector('[name="StreetAddress1"]');
let cityElem = document.querySelector('[name="City"]');
let postalCodeElem = document.querySelector('[name="PostalCode"]');
let stateElem = document.querySelector('[name="State"]');
let countryElem = document.querySelector('[name="Country"]');

function fillInAddress() {
    const place = autocomplete.getPlace();
    streetElem.value = '';
    cityElem.value = '';
    postalCodeElem.value = '';
    stateElem.value = '';
    countryElem.value = '';

    for (const component of place.address_components) {
        const componentType = component.types[0];
        switch (componentType) {
            case "street_number": {
                console.log(componentType, component.long_name, component.short_name);
                streetElem.value = component.long_name + ' ' + streetElem.value;
                if (shipping_check.checked)
                    street2Elem.value = streetElem.value;
                //streetElem.dispatchEvent(new Event('change', { 'bubbles': true }));
                break;
            }
            case "route": {
                console.log(componentType, component.long_name, component.short_name);
                streetElem.value += component.short_name;
                if (shipping_check.checked)
                    street2Elem.value = streetElem.value;
                //streetElem.dispatchEvent(new Event('change', { 'bubbles': true }));
                break;
            }
            case "postal_code": {
                console.log(componentType, component.long_name, component.short_name);
                postalCodeElem.value = component.long_name + postalCodeElem.value;
                if (shipping_check.checked)
                    postalCode2Elem.value = postalCodeElem.value;
                //postalCodeElem.dispatchEvent(new Event('change', { 'bubbles': true }));
                break;
            }
            case "postal_code_suffix": {
                console.log(componentType, component.long_name, component.short_name);
                postalCodeElem.value += '-' + component.long_name;
                if (shipping_check.checked)
                    postalCode2Elem.value = postalCodeElem.value;
                //postalCodeElem.dispatchEvent(new Event('change', { 'bubbles': true }));
                break;
            }
            case "locality":
                console.log(componentType, component.long_name, component.short_name);
                cityElem.value = component.long_name;
                if (shipping_check.checked)
                    city2Elem.value = cityElem.value;
                //cityElem.dispatchEvent(new Event('change', { 'bubbles': true }));
                break;
            case "administrative_area_level_1": {
                console.log(componentType, component.long_name, component.short_name);
                stateElem.value = component.short_name;
                if (shipping_check.checked)
                    state2Elem.value = stateElem.value;
                //stateElem.dispatchEvent(new Event('change', { 'bubbles': true }));
                break;
            }
            case "country":
                console.log(componentType, component.long_name, component.short_name);
                countryElem.value = component.short_name;
                if (shipping_check.checked)
                    country2Elem.value = countryElem.value;
                //countryElem.dispatchEvent(new Event('change', { 'bubbles': true }));
                break;
        }
    }
    changePrices();
    //postalCodeElem.dispatchEvent(new Event('change', { 'bubbles': true }));
    //streetElem.dispatchEvent(new Event('change', { 'bubbles': true }));
    //cityElem.dispatchEvent(new Event('change', { 'bubbles': true }));
    //stateElem.dispatchEvent(new Event('change', { 'bubbles': true }));
    //countryElem.dispatchEvent(new Event('change', { 'bubbles': true }));

    // After filling the form with address components from the Autocomplete
    // prediction, set cursor focus on the second address line to encourage
    // entry of subpremise information such as apartment, unit, or floor number.
    address2Field.focus();
}

let autocomplete2;
let address12Field = document.querySelector('[name="Address2Street1"]');
let address22Field = document.querySelector('[name="Address2Street2"]');

let street2Elem = document.querySelector('[name="Address2Street1"]');
let city2Elem = document.querySelector('[name="City2"]');
let postalCode2Elem = document.querySelector('[name="PostalCode2"]');
let state2Elem = document.querySelector('[name="State2"]');
let country2Elem = document.querySelector('[name="Country2"]');

function fillInShippingAddress() {
    const place = autocomplete2.getPlace();
    street2Elem.value = '';
    city2Elem.value = '';
    postalCode2Elem.value = '';
    state2Elem.value = '';
    country2Elem.value = '';

    for (const component of place.address_components) {
        const componentType = component.types[0];
        switch (componentType) {
            case "street_number": {
                console.log(componentType, component.long_name, component.short_name);
                street2Elem.value = component.long_name + ' ' + street2Elem.value;
                //streetElem.dispatchEvent(new Event('change', { 'bubbles': true }));
                break;
            }
            case "route": {
                console.log(componentType, component.long_name, component.short_name);
                street2Elem.value += component.short_name;
                //streetElem.dispatchEvent(new Event('change', { 'bubbles': true }));
                break;
            }
            case "postal_code": {
                console.log(componentType, component.long_name, component.short_name);
                postalCode2Elem.value = component.long_name + postalCode2Elem.value;
                //postalCodeElem.dispatchEvent(new Event('change', { 'bubbles': true }));
                break;
            }
            case "postal_code_suffix": {
                console.log(componentType, component.long_name, component.short_name);
                postalCode2Elem.value += '-' + component.long_name;
                //postalCodeElem.dispatchEvent(new Event('change', { 'bubbles': true }));
                break;
            }
            case "locality":
                console.log(componentType, component.long_name, component.short_name);
                city2Elem.value = component.long_name;
                //cityElem.dispatchEvent(new Event('change', { 'bubbles': true }));
                break;
            case "administrative_area_level_1": {
                console.log(componentType, component.long_name, component.short_name);
                state2Elem.value = component.short_name;
                //stateElem.dispatchEvent(new Event('change', { 'bubbles': true }));
                break;
            }
            case "country":
                console.log(componentType, component.long_name, component.short_name);
                country2Elem.value = component.short_name;
                //countryElem.dispatchEvent(new Event('change', { 'bubbles': true }));
                break;
        }
    }
    changePrices();
    //postalCodeElem.dispatchEvent(new Event('change', { 'bubbles': true }));
    //streetElem.dispatchEvent(new Event('change', { 'bubbles': true }));
    //cityElem.dispatchEvent(new Event('change', { 'bubbles': true }));
    //stateElem.dispatchEvent(new Event('change', { 'bubbles': true }));
    //countryElem.dispatchEvent(new Event('change', { 'bubbles': true }));

    // After filling the form with address components from the Autocomplete
    // prediction, set cursor focus on the second address line to encourage
    // entry of subpremise information such as apartment, unit, or floor number.
    address22Field.focus();
}