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');
  //   }
  // });


  const selectedFields = Array.from(container.querySelectorAll('.field-name-dropdown'))
    .map((dropdown) => dropdown.value)
    .filter((value) => value);

  fields
    .filter((field) => !selectedFields.includes(field.name)) 
    .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>';

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

  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';
  addButton.disabled = true; // Initially disable the Add button

  if (fieldIndex === container.querySelectorAll('.field-name-dropdown').length - 1) {
    // const buttonWrapper = document.createElement('div');
    // buttonWrapper.classList.add('button-wrapper');
    // buttonWrapper.appendChild(addButton);
    buttonContainer.appendChild(addButton);

    // buttonContainer.appendChild(buttonWrapper);
  }

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



  // Delete Combo Logics
  deleteButton.addEventListener('click', () => {
    console.log(`Delete button clicked for mapping at index ${fieldIndex}`);


    // Check if it is the first field (fieldIndex === 0)
    if (fieldIndex === 0) {
      console.log("Resetting the first field and clearing its choices.");

      // Reset the field dropdown
      fieldDropdown.value = ""; // Clear selected value
      fieldDropdown.setAttribute("placeholder", "Choose a field"); // Reset placeholder text
      fieldDropdown.disabled = false; // Make sure it's still enabled for selection (optional)

      // Clear the choices container without removing it
      choicesContainer.innerHTML = ""; // Clear all dynamically-added options
      choicesContainer.style.display = "block"; // Ensure the container is still visible (if hidden)

      // Update Backend JSON: Reset the combination but keep the structure
      const findRule = ticketworkflowconditions[ruleIndex];
      if (findRule) {
        const combination = findRule.event.combination;

        // Reset the first field's mapping, leaving it in JSON
        combination[fieldIndex] = { field: null }; // Reset the structure to a default value

        // Update the JSON with reset changes
        ticketworkflowconditions[ruleIndex] = {
          ...findRule,
          event: { ...findRule.event, combination },
        };

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

      console.log("First field and choices cleared, but position retained.");
      return; // Exit the function since this handles the first field case completely
    }


    // 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);

    // Remove containers if they're empty after deletion (clean-up logic)
    if (fieldNameContainer.children.length === 0) {
      fieldNameContainer.remove();
    }
    if (choicesContainer.children.length === 0) {
      choicesContainer.remove();
    }
    if (buttonContainer.children.length === 0) {
      buttonContainer.remove();
    }

    // Handle Add button placement
    const remainingDropdowns = container.querySelectorAll('.field-name-dropdown');

    // If no dropdowns remain, ensure the Add button is placed in the button-container
    if (remainingDropdowns.length === 0) {
      console.log("No remaining dropdowns, placing Add button in the empty container.");

      const addButton = buttonContainer.querySelector('.add-button') || 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 the button to the button-container if it's not already there
      if (!buttonContainer.contains(addButton)) {
        buttonContainer.appendChild(addButton);
      }

      // Ensure Add button functionality is properly attached
      addButton.addEventListener('click', () => {
        console.log(`Add button clicked after all fields removed. Adding new set.`);
        const newIndex = ticketworkflowconditions[ruleIndex].event.combination.length;

        createAdditionalDropdowns(container, obj, ruleIndex, newIndex); // Dynamically add a new dropdown+choices set
      });
   
    } else {

      // If dropdowns remain, find the last button-container with a delete button and add the Add button there
      const lastFieldContainer = buttonContainer.closest('div').querySelectorAll('.button-container');
      const lastButtonContainer = lastFieldContainer[lastFieldContainer.length - 1];

      if (lastButtonContainer) {
        // Remove any existing Add buttons to avoid duplication
        const existingAddButton = lastButtonContainer.querySelector('.add-button');
        if (!existingAddButton) {
          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 the Add button to the last button-container
          buttonContainer.appendChild(addButton);

          // Add button functionality
          addButton.addEventListener('click', () => {
            console.log(`Add button clicked. Adding new set.`);
            const newIndex = ticketworkflowconditions[ruleIndex].event.combination.length;

            createAdditionalDropdowns(container, obj, ruleIndex, newIndex);
          });
        }
      }
    }
  

    console.log(`Field at index ${fieldIndex} deleted successfully.`);
  });


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

    addButton.disabled = false; // Enable the Add button when a field is selected

    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");
    }
  });


  // Existing mapping
  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");
    }
  }





}


explain this