async function getFieldnamesfrom1stapi(
  fieldNameContainer,
  fields,
  choicesContainer,
  selectedEventValue,
  buttonContainer,
  container,
  selectedFieldName = null,
  selectedChoices = null,
  obj,
  ruleIndex,
  fieldIndex
) {
  if (!selectedEventValue) {
    console.error("Select an event before proceeding.");
    return;
  }

  // Create the field dropdown
  const fieldDropdown = document.createElement('fw-select');
  fieldDropdown.classList.add('field-name-dropdown');
  fieldDropdown.setAttribute('label', 'Ticket Fields');
  fieldDropdown.setAttribute('required', 'true');
  fieldDropdown.setAttribute('placeholder', 'Choose a field');
  fieldDropdown.setAttribute('hint-text', 'Select singular option');

  fields.forEach((field) => {
    const option = document.createElement('fw-select-option');
    option.setAttribute('value', field.name);
    option.textContent = field.label;
    fieldDropdown.appendChild(option);

    if (selectedFieldName && field.name === selectedFieldName) {
      option.setAttribute('selected', 'selected');
    }
  });

  fieldNameContainer.appendChild(fieldDropdown);

  // Create the buttons
  const deleteButton = document.createElement('fw-button');
  deleteButton.setAttribute('size', 'icon');
  deleteButton.classList.add('delete-button');
  deleteButton.innerHTML = '<fw-icon name="delete" size="20" color="white"></fw-icon>';

  // Add delete button wrapper
  const deleteButtonWrapper = document.createElement('div');
  deleteButtonWrapper.classList.add('delete-button-container', 'mt-5');
  deleteButtonWrapper.appendChild(deleteButton);
  buttonContainer.appendChild(deleteButtonWrapper);

  // Create the add button dynamically
  const existingAddButton = container.querySelector('.add-button');
  if (existingAddButton) {
    existingAddButton.remove();
  }

  const addButton = document.createElement('fw-button');
  addButton.setAttribute('size', 'icon');
  addButton.classList.add('add-button');
  addButton.innerHTML = '<fw-icon name="plus" size="20" color="white"></fw-icon>';
  addButton.style.marginTop = '16px';
  
  // Append Add button to the last field
  if (fieldIndex === container.querySelectorAll('.field-name-dropdown').length - 1) {
    const buttonWrapper = document.createElement('div');
    buttonWrapper.classList.add('button-wrapper');
    // buttonWrapper.style.display = 'flex';
    // buttonWrapper.style.gap = '8px';
    buttonWrapper.appendChild(addButton);
    buttonContainer.appendChild(buttonWrapper);
  }

  // Add button functionality
  addButton.addEventListener('click', () => {
    console.log(ticketworkflowconditions[ruleIndex].event);
    const newIndex = ticketworkflowconditions[ruleIndex].event.combination.length;
    createAdditionalDropdowns(container, obj, ruleIndex, newIndex);
  });

  // Delete button functionality
// Delete button functionality
deleteButton.addEventListener('click', () => {
  console.log(`Delete button clicked for mapping at index ${fieldIndex}`);
  
  // Remove field from ticketworkflowconditions
  const findRule = ticketworkflowconditions[ruleIndex];
  if (findRule) {
    const combination = findRule.event.combination;

    // Remove the field from the combination
    combination.splice(fieldIndex, 1);

    // Update ticketworkflowconditions in the backend
    ticketworkflowconditions[ruleIndex] = { ...findRule, event: { ...findRule.event, combination } };

    console.log(`Backend updated after deletion: ${JSON.stringify(ticketworkflowconditions, null, 2)}`);
  }


  // Remove field dropdown and choices from the UI
  fieldNameContainer.removeChild(fieldDropdown);
  choicesContainer.innerHTML = '';
  buttonContainer.removeChild(deleteButtonWrapper);

  // If this is the last field, remove the add button as well
  if (fieldIndex === container.querySelectorAll('.field-name-dropdown').length - 1) {
    const currentAddButton = buttonContainer.querySelector('.add-button');
    if (currentAddButton) {
      currentAddButton.remove();
    }
  }
});


  fieldDropdown.addEventListener('fwChange', async (event) => {
    const newSelectedFieldName = event.target.value;

    // Clear existing choices
    choicesContainer.innerHTML = '';

    const newSelectedField = fields.find((field) => field.name === newSelectedFieldName);
    if (newSelectedField) {
      const findRule = ticketworkflowconditions[ruleIndex];
      if (findRule) {
        const combination = findRule.event.combination;

        const newKeyValue = { [newSelectedFieldName]: null };
        combination.splice(fieldIndex, 1, newKeyValue);

        if (combination)
          console.log(`Field changed. Updated backend: ${JSON.stringify(ticketworkflowconditions, null, 2)}`);
      }

      await showingitschoices(
        choicesContainer,
        newSelectedField,
        selectedEventValue,
        newSelectedFieldName,
        buttonContainer,
        container,
        fieldNameContainer,
        null,
        obj,
        ruleIndex,
        fieldIndex
      );

      console.log(`Field changed to: ${newSelectedFieldName}`);
    } else {
      console.error("Field not found in Dropdown");
    }
  });

  if (selectedFieldName) {
    const selectedField = fields.find((field) => field.name === selectedFieldName);
    if (selectedField) {
      await showingitschoices(
        choicesContainer,
        selectedField,
        selectedEventValue,
        selectedFieldName,
        buttonContainer,
        container,
        fieldNameContainer,
        selectedChoices,
        obj,
        ruleIndex,
        fieldIndex
      );

      const findRule = ticketworkflowconditions[ruleIndex];
      const combination = findRule.combination;
      const newKeyValue = { [selectedFieldName]: selectedChoices ? selectedChoices[0] : null };
      combination.splice(fieldIndex, 1, newKeyValue);
      ticketworkflowconditions[ruleIndex] = { ...findRule, combination };

      console.log(`Updated ticketworkflowconditions: ${JSON.stringify(ticketworkflowconditions, null, 2)}`);
    } else {
      console.error("Field not found in Dropdown");
    }
  }
}