in this code in which part existing field value is mapped in this code ?

async function getFieldnamesfrom1stapi(
  fieldNameContainer,
  fields,
  choicesContainer,
  selectedEventValue,
  buttonContainer,
  container,
  selectedFieldName = null,
  selectedChoices = [], 
  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');

  // 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 ');
fieldDropdown.style.marginBottom = '30px'; 




  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);
  
  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.style.marginBottom = '80px'; 

  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.disabled = true;



const isFirstSet = container.querySelectorAll('.field-name-dropdown').length === 1;

addButton.style.marginTop = ''; 


if (isFirstSet) {
  addButton.style.marginTop = '48px'; 
} else {
  addButton.style.marginTop = '-150px'; 
}

// Append the Add button to the container
buttonContainer.appendChild(addButton);

 
if (fieldIndex === container.querySelectorAll('.field-name-dropdown').length - 1) {
    buttonContainer.appendChild(addButton);
  }

addButton.addEventListener("click", () => {
    console.log("Add Button clicked. Freezing dropdowns and choices.");
   
   const dropdowns = container.querySelectorAll(".field-name-dropdown");
    dropdowns.forEach((dropdown) => {
        dropdown.disabled = true; 
    });

    const newIndex = ticketworkflowconditions[ruleIndex].event.combination.length;
    createAdditionalDropdowns(container, obj, ruleIndex, newIndex);

    checkAddButtonVisibility();
});
  


if (container.querySelectorAll('.field-name-dropdown').length > 1) {
  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>';
}

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

//   const modal = document.getElementById("composition");
//   if (modal) {
//     modal.setAttribute("is-open", "true");
//     modal.querySelector("fw-modal-title").innerHTML = `<span>Delete Mapping</span>`;
//     modal.querySelector("fw-modal-content").innerHTML = `<span>Are you sure you want to delete this field mapping?</span>`;

//     modal.addEventListener(
//       "fwSubmit",
//       () => {

//         // if (fieldIndex === 0) {
//         //   console.log("Resetting the first field and clearing its choices.");
//         //   const currentDropdowns = container.querySelectorAll(".field-name-dropdown");
//         //     const currentDropdownIndex = Array.from(currentDropdowns).indexOf(fieldDropdown);
  
//         //     if (currentDropdownIndex !== -1) {
//         //       const combination = findRule.event.combination;
//         //       combination.splice(currentDropdownIndex, 1);
  
//         //       ticketworkflowconditions[ruleIndex] = {
//         //         ...findRule,
//         //         event: { ...findRule.event, combination },
//         //       };
  
             
  
//         //       console.log("Updated ticketworkflowconditions:", JSON.stringify(ticketworkflowconditions, null, 2));
//         //     }

//         // }
//         //   console.log("Updated ticketworkflowconditions:", JSON.stringify(ticketworkflowconditions, null, 2));


//         //   modal.removeAttribute("is-open");          
//         //   checkAddButtonVisibility();
//         //   return;
//         // }

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

//         //   fieldDropdown.value = ""; 
//         //   fieldDropdown.setAttribute("placeholder", "Choose a field");
//         //   fieldDropdown.disabled = false;

//         //   choicesContainer.innerHTML = '<br><br><br><div class="temporary style" style="margin-bottom: 9px;"></div>';
//         //   choicesContainer.style.display = "block"; 
          
//         //   const findRule = ticketworkflowconditions[ruleIndex];
//         //   if (findRule) {
//         //     const combination = findRule.event.combination;
//         //     combination[fieldIndex] = { field: null }; 

//         //     ticketworkflowconditions[ruleIndex] = {
//         //       ...findRule,
//         //       event: { ...findRule.event, combination },
//         //     };
//         //   }

//         //   modal.removeAttribute("is-open");          
//         //   checkAddButtonVisibility();
//         //   return;
//         // }


        
//         const findRule = ticketworkflowconditions[ruleIndex];
//         if (findRule) {
//           const currentDropdowns = container.querySelectorAll(".field-name-dropdown");
//           const currentDropdownIndex = Array.from(currentDropdowns).indexOf(fieldDropdown);


//           if (currentDropdownIndex !== -1) {
//             const combination = findRule.event.combination;
//             combination.splice(currentDropdownIndex, 1);


//              // Remove the entire field container div
//              const fieldremoveContainer = fieldNameContainer.closest(".field-container");
//               if (fieldremoveContainer) {
//                 fieldremoveContainer.remove();
//               }
  
//               const choiceremoveContainer = fieldNameContainer.closest(".choices-container");
//               if (choiceremoveContainer) {
//                 choiceremoveContainer.remove();
//               }


//             ticketworkflowconditions[ruleIndex] = {
//               ...findRule,
//               event: { ...findRule.event, combination },
//             };

//             fieldNameContainer.removeChild(fieldDropdown);
//             choicesContainer.innerHTML = ""; 
//             buttonContainer.removeChild(deleteButtonWrapper);
            
//             const spacingElement = container.querySelectorAll('.field-name-dropdown');
//             if (spacingElement.length === 0) {              
//               container.style.marginTop = ''; 
//             }
//           }
//         }

//         console.log("Updated ticketworkflowconditions:", JSON.stringify(ticketworkflowconditions, null, 2));
//         modal.removeAttribute("is-open");
//         checkAddButtonVisibility();
//       },
//       { once: true }
//     );

//     modal.querySelector("fw-modal-footer").addEventListener(
//       "fwClose",
//       () => {
//         modal.removeAttribute("is-open");
//         console.log("Delete operation was cancelled.");
//       },
//       { once: true }
//     );
//   } else {
//     console.error("Modal element with ID 'composition' not found.");
//   }
// });


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

  const modal = document.getElementById("composition");
  if (modal) {
    modal.setAttribute("is-open", "true");
    modal.querySelector("fw-modal-title").innerHTML = `<span>Delete Mapping</span>`;
    modal.querySelector("fw-modal-content").innerHTML = `<span>Are you sure you want to delete this field mapping?</span>`;

    modal.addEventListener(
      "fwSubmit",
      () => {

        const findRule = ticketworkflowconditions[ruleIndex];
        if (findRule) {
          const currentDropdowns = container.querySelectorAll(".field-name-dropdown");
          const currentDropdownIndex = Array.from(currentDropdowns).indexOf(fieldDropdown);

          if (currentDropdownIndex !== -1) {
            const combination = findRule.event.combination;
            combination.splice(currentDropdownIndex, 1);

            // if (combination.length === 1) {
            //   console.log("This is the last combination being deleted.");

            //   // Remove the existing delete button
            //   const existingDeleteButton = container.querySelector('.delete-button-container');
            //   if (existingDeleteButton) {
            //     existingDeleteButton.remove();
            //   }

            //   // Apply marginTop to addButton
            //   if (addButton) {
            //     addButton.style.marginTop = ''; 
            //     addButton.style.marginTop = '48px'; // Add new marginTop
            //   }
            // }
 
            const fieldremoveContainer = fieldNameContainer.closest(".field-container");
            if (fieldremoveContainer) {
              fieldremoveContainer.remove();
            }

            const choiceremoveContainer = fieldNameContainer.closest(".choices-container");
            if (choiceremoveContainer) {
              choiceremoveContainer.remove();
            }

            ticketworkflowconditions[ruleIndex] = {
              ...findRule,
              event: { ...findRule.event, combination },
            };

            fieldNameContainer.removeChild(fieldDropdown);
            choicesContainer.innerHTML = ""; 
            buttonContainer.removeChild(deleteButtonWrapper);

            const spacingElement = container.querySelectorAll('.field-name-dropdown');
            if (spacingElement.length === 0) {              
              container.style.marginTop = ''; 
            }
          }
        }

        console.log("Updated ticketworkflowconditions:", JSON.stringify(ticketworkflowconditions, null, 2));
        modal.removeAttribute("is-open");
        checkAddButtonVisibility();
      },
      { once: true }
    );

    modal.querySelector("fw-modal-footer").addEventListener(
      "fwClose",
      () => {
        modal.removeAttribute("is-open");
        console.log("Delete operation was cancelled.");
      },
      { once: true }
    );
  } else {
    console.error("Modal element with ID 'composition' not found.");
  }
});



checkDeleteButtonVisibility();

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

  if (!newSelectedFieldName) {

    choicesContainer.innerHTML = "";
    const findRule = ticketworkflowconditions[ruleIndex];
    if (findRule) {
      findRule.event.combination[fieldIndex] = {}; 
    }
    console.log("Field deselected. Choices cleared.");
    return;
  }

  const newSelectedField = fields.find((field) => field.name === newSelectedFieldName);
  if (newSelectedField) {
    const findRule = ticketworkflowconditions[ruleIndex];
    if (findRule) {      
      findRule.event.combination[fieldIndex] = {
        [newSelectedFieldName]: selectedChoices || [], 
      };
    }

    console.log(`Field changed. Updated backend:`, JSON.stringify(ticketworkflowconditions, null, 2));

    await showingitschoices(
      choicesContainer,
      newSelectedField,
      selectedEventValue,
      newSelectedFieldName,
      buttonContainer,
      container,
      fieldNameContainer,
      [], // Clear choices if necessary
      obj,
      ruleIndex,
      fieldIndex
    );

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

  checkAddButtonVisibility();
});



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

//   const findRule = ticketworkflowconditions[ruleIndex];

//   if (!newSelectedFieldName) {
//     // Clear choices if field is deselected
//     choicesContainer.innerHTML = "";
//     if (findRule) {
//       // Clear the field mapping in combination
//       findRule.event.combination[fieldIndex] = {};
//     }
//     console.log("Field deselected. Choices cleared.");
//     return;
//   }

//   const newSelectedField = fields.find((field) => field.name === newSelectedFieldName);
//   if (newSelectedField) {
//     if (findRule) {
//       // Check if there’s already an existing entry for the fieldIndex
//       if (!findRule.event.combination[fieldIndex]) {
//         // Create a new entry if not exists
//         findRule.event.combination[fieldIndex] = {};
//       }

//       // Initialize choices for the field if not already
//       if (!findRule.event.combination[fieldIndex][newSelectedFieldName]) {
//         findRule.event.combination[fieldIndex][newSelectedFieldName] = []; // Start with an empty array if not exists
//       }

//       // Now, at this point, you can update the choices based on your use case
//       await showingitschoices(
//         choicesContainer,
//         newSelectedField,
//         selectedEventValue,
//         newSelectedFieldName,
//         buttonContainer,
//         container,
//         fieldNameContainer,
//         findRule.event.combination[fieldIndex][newSelectedFieldName] || [], // Use existing choices or fallback to empty array
//         obj,
//         ruleIndex,
//         fieldIndex
//       );

      
//       const selectedChoices = getSelectedChoices();
//       findRule.event.combination[fieldIndex][newSelectedFieldName] = [
//         ...new Set([...findRule.event.combination[fieldIndex][newSelectedFieldName], ...selectedChoices]) // Combine current choices with newly selected ones, ensuring uniqueness
//       ];

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

//   checkAddButtonVisibility();
// });


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];
    if (findRule) {
      // Ensure the field index is updated rather than appending
      findRule.event.combination[fieldIndex] = {
        [selectedFieldName]: selectedChoices || [],
      };
      console.log(`Updated ticketworkflowconditions: ${JSON.stringify(ticketworkflowconditions, null, 2)}`);
    }
  } else {
    console.error(`Field not found in Dropdown for existing mapping: ${selectedFieldName}`);
  }
}


function checkAddButtonVisibility() {
    const dropdowns = container.querySelectorAll(".field-name-dropdown");
    const selectedFieldValues = Array.from(dropdowns)
        .map((dropdown) => dropdown.value)
        .filter((value) => value !== "");

    const areAllFieldsSelected = selectedFieldValues.length >= fields.length;

    const lastDropdownWrapper =
        dropdowns.length > 0
            ? dropdowns[dropdowns.length - 1].closest(".button-container")
            : null;

    if (areAllFieldsSelected) {
        console.log("All fields are selected. Hiding Add Button.");

        if (addButton.parentNode) {            
            if (lastDropdownWrapper && lastDropdownWrapper.contains(addButton)) {
                lastDropdownWrapper.removeChild(addButton);
            }
        }
    } else {
        console.log("Fields are still available. Add Button will be shown.");
        if (dropdowns.length > 0 && lastDropdownWrapper) {
            if (!lastDropdownWrapper.contains(addButton)) {
                lastDropdownWrapper.appendChild(addButton);
                addButton.style.visibility = "visible"; 
            }
        }
    }    
    addButton.disabled = false;
}

function checkDeleteButtonVisibility() {
  const dropdowns = container.querySelectorAll(".field-name-dropdown");
  const firstSetDeleteButtons = container.querySelectorAll(".delete-button-container");
  
  firstSetDeleteButtons.forEach((buttonWrapper, index) => {
    if (index === 0) { 
      if (dropdowns.length === 1) {
        buttonWrapper.style.display = "none";
      } else {
        buttonWrapper.style.display = "block"; 
        
      }
    }
  });
}


}