Fliplet.UI.AddressField()

var instance = Fliplet.UI.AddressField(target);

Fliplet.UI.AddressField(el)

instance.get()

instance.set(value, triggerChange)

instance.clear(triggerChange)

instance.change(fn)

instance.getAutocompleteSuggestions(input, countryRestrictions)

instance.getAddressComponents(id)

Fliplet.UI.AddressField.get(el)

initAutocomplete: async function(input, countryRestrictions) {
  // Initialize the address field using Fliplet's UI component
  this.addressField = Fliplet.UI.AddressField(this.$refs.addressField);

  // Fetch autocomplete suggestions for the given input and country restrictions
  const suggestions = await this.addressField.getAutocompleteSuggestions(input, countryRestrictions);

  // Check if the current value is an object (indicating that something has already been selected from the suggestions)
  if (typeof this.value === 'object') {
    // If the value is an object, reset the address suggestions and mark suggestion as selected
    this.addressSuggestions = [];
    this.suggestionSelected = true;
  } else {
    // Otherwise, update the address suggestions with the fetched suggestions
    this.addressSuggestions = suggestions;
  }
}

updateFieldOptions: function() {
  var fields = this.$parent.fields; // Access the parent fields

  // Map the fields to create an array of field options
  this.fieldOptions = fields.map(function(field) {
    // Exclude specific field types from the options
    if (field._type !== 'flButtons' && field._type !== 'flAddress') {
      return { label: field.label, disabled: false }; // Create an option object for valid fields
    }
  }).filter(Boolean); // Filter out any undefined values from the array
}

extractAddressComponents: function(place) {
  // Initialize an object to hold the extracted address data
  const addressData = {
    streetNumber: '',
    streetName: '',
    city: '',
    state: '',
    country: '',
    postalCode: ''
  };

  // Iterate through each component in the place array
  for (const component of place) {
    const { types, long_name: longName } = component; // Destructure to get types and long name of the component

    // Iterate through each type of the current component
    for (const type of types) {
      switch (type) {
        case 'street_number':
          addressData.streetNumber = longName;
          break;
        case 'route':
          addressData.streetName = longName;
          break;
        case 'locality':
          addressData.city = longName;
          break;
        case 'postal_town':
          if (!addressData.city) {
            addressData.city = longName;
          }
          break;
        case 'administrative_area_level_1':
          addressData.state = longName;
          break;
        case 'country':
          addressData.country = longName;
          break;
        case 'postal_code':
          addressData.postalCode = longName;
          break;

        default:
          // Ignore other types not explicitly handled
          break;
      }
    }
  }

  // Return the populated addressData object with the extracted address components
  return addressData;
}

assignValuesToSeparateFields: function(place, separateFieldsName) {
  // Extract address components from the given place object
  const addressData = this.extractAddressComponents(place);

  // Iterate over each field in the separateFieldsName array
  separateFieldsName.forEach(field => {
    // Assign the extracted address component value to the corresponding field
    field.value = addressData[field.key];
  });
}

updateSelectedFieldsProperty: function(attr, value) {
  // Toggle the value if the attribute is 'readonly'
  if (attr === 'readonly') {
    value = !value;
  }

  // Get the parent fields and selected field options
  const fields = this.$parent.fields;
  const selectedValues = Object.values(this.selectedFieldOptions);

  // Iterate over each field and update the specified property if it matches the selected values
  fields.forEach(field => {
    if (selectedValues.includes(field.name)) {
      field[attr] = value;
    }
  });
}

updateSelectedFieldsOptions: function() {
  // Iterate over each key in the selectedFieldOptions object
  Object.keys(this.selectedFieldOptions).forEach(key => {
    const selectedFieldLabel = this.selectedFieldOptions[key]; // Get the currently selected field label
    // Check if the selected field label exists in the available field options
    const isValidOption = this.fieldOptions.find(option => option.label === selectedFieldLabel);

    // If the selected option is not valid, reset it to an empty string
    if (!isValidOption) {
      this.selectedFieldOptions[key] = '';
    }
  });
}

updateDisabledOptions: function() {
  // Update the field options and the selected fields options
  this.updateFieldOptions();
  this.updateSelectedFieldsOptions();

  // Get an array of assigned values from the selected field options
  const assignedValues = Object.values(this.selectedFieldOptions)
    .filter(value => value && this.fieldOptions.some(option => option.label === value))
    .map(value => value); // Filter and map to only include valid assigned values

  // Disable options that have been assigned
  this.fieldOptions.forEach(option => {
    option.disabled = assignedValues.includes(option.label); // Set disabled status based on assigned values
  });
}

onChange: function() {
  // Add a change event listener to the address field
  this.addressField.change((value) => {
    // Check if there are any address components available
    if (this.addressComponents.length) {
      // Assign extracted address components to separate fields
      this.assignValuesToSeparateFields(this.addressComponents, this.separateFieldsName);

      // Iterate over the selected field options to update the corresponding field values
      for (const key in this.selectedFieldOptions) {
        if (!this.selectedFieldOptions[key]) continue; // Skip empty selections

        const matchedField = this.separateFieldsName.find(field => field.key === key); // Find the matched field by key
        const fieldName = this.selectedFieldOptions[key]; // Get the field name from selected options

        if (!matchedField) continue; // Skip if no matched field found

        const fields = this.$parent.fields; // Access parent fields

        // Update the value of the matched field
        fields.forEach(field => {
          if (field.label === fieldName) {
            field.value = matchedField.value; // Set the field's value
          }
        });
      }
    }

    // Update the property of the selected fields to read-only based on manual input
    this.updateSelectedFieldsProperty('readonly', this.manualInput);

    // Set the current value and update it based on whether manual input is allowed
    if (!this.manualInput && this.addressComponents.length) {
      this.suggestionSelected = true;
      this.value = value;
      this.updateValue();
    } else {
      this.value = value;
      this.updateValue();
    }

    this.suggestionSelected = true; // Ensure the suggestion is marked as selected
  });
}

handleKeyDown: function(event) {
  const suggestionsCount = this.addressSuggestions.length; // Get the count of available suggestions

  // If there are no suggestions, exit the function early
  if (!suggestionsCount) {
    return;
  }

  // Handle different key events
  switch (event.key) {
    case 'ArrowDown': // Move down in the suggestions
      event.preventDefault(); // Prevent default behavior (e.g., scrolling)

      // Move to the next suggestion if possible
      if (this.activeSuggestionIndex < suggestionsCount - 1) {
        this.activeSuggestionIndex += 1; // Increment the active suggestion index
      }

      break;

    case 'ArrowUp': // Move up in the suggestions
      event.preventDefault(); // Prevent default behavior

      // Move to the previous suggestion if possible
      if (this.activeSuggestionIndex > 0) {
        this.activeSuggestionIndex -= 1; // Decrement the active suggestion index
      }

      break;

    case 'Enter': // Select the currently active suggestion
      event.preventDefault(); // Prevent default behavior

      // If a suggestion is currently active, select it
      if (this.activeSuggestionIndex >= 0) {
        const selectedSuggestion = this.addressSuggestions[this.activeSuggestionIndex]; // Get the selected suggestion

        this.lastChosenAutocompleteValue = selectedSuggestion.label; // Store the label of the selected suggestion
        this.selectSuggestion(selectedSuggestion); // Call the function to handle the selection
        this.activeSuggestionIndex = -1; // Reset the active suggestion index
      }

      break;

    default:
      break; // Do nothing for other keys
  }
}

handleClickOutside: function(event) {
  const suggestionsList = this.$el.querySelector('.google-autocomplete'); // Get the suggestions list element

  // Check if the suggestions list exists and if the click was outside of it while manual input is enabled
  if (suggestionsList && !suggestionsList.contains(event.target) && this.manualInput) {
    this.addressSuggestions = []; // Clear the address suggestions
    this.suggestionSelected = false; // Mark that no suggestion has been selected
  }
}